Архив рубрики: Как сделать свой Сайт

Как зарегистрироваться в reCAPTCHA и установить на сайт

У меня уже есть свой опыт по работе со спамом, защите от него и установке всяких плагинов. Но в последнее время меня привлекла именно reCAPTCHA. Уж слишком часто ее встречаю на хороших ресурсах, которые славятся надежностью и доверием. Так что сегодня у меня будет установлена reCAPTCHA, посмотрим, что из этого получится.

Как зарегистрироваться в reCAPTCHA

Для начала нужно зарегистрироваться на официальном сайте reCAPTCHA. Лучше и удобнее сделать это с браузера, на котором выполнен вход в Аккаунт Google. Как зарегистрироваться и создать аккаунт Google здесь.

Видим форму, заполняем имя и домен сайта:

registratciia-v-rekapcha

На этом регистрация закончена, и я попадаю в личный кабинет, его лучше сразу добавить в закладки, так как здесь будет много полезной информации по работе.

admin-v-rekapcha

Как Добавить reCAPTCHA на сайт?

Для Word Press проще использовать плагин, так не у всех есть свой сервер, и не все хотят заморачиваться. Тем боле что защита нужна уже.

По этому устанавливаю плагин No CAPTCHA reCAPTCHA из библиотеки Word Press и активирую его. Дальше все еще проще, копирую ключи с личного кабинета:recaptcha admin

и вставляю их в пани администратора сайта, где после активации появилась дополнительная позиция:nastrojka-i-rabota-plagina-no-captcha-recaptcha

Лучше добавлю защиту и на вход в панель администратора, лишней точно не будет. Поменял язык и тему на светлую:CAPTCHA reCAPTCHA

Все готово. Теперь никакого автоматического спама, роботов и другого хлама в комментариях.

До встречи на страницах сайта qoogi.com

Как увеличить фото в статье по клику

Я вижу свой сайт удобным, приятным и легким для чтения, по этому решил доработать маленькую функцию. А именно увеличение изображения по клику мыши. Это невероятно удобно, когда вам хочется рассмотреть фото или скриншот по подробнее, и вы это делаете, просто кликнув по нему мышью. Делается такая доработка очень просто, даже без особенных знаний в кодировании, так как за нас уже давно все сделали добрые люди.

Как увеличить фото в статье по клику

Для того, что бы мои изображения увеличивались по клику, я сделал несколько мероприятий:

  1. Скачал необходимы мне скрипт по ссылке, это архив с папкой. Распаковав архив я загрузил его в корень моего сайта с помощью filezilla, туда где находится папка wp-admin и другие. Это самый простой и удобный метод.
  2. Далее, как я обычно поступаю, я скачиваю оригинальный файл с папки темы сайта «footer.php», редактирую его в программе notepad++, вставляю перед закрывающим тегом </body> следующий код:
<script type="text/javascript" src="https://site.ru/sbox/progress_util.js"></script>
 <script type="text/javascript">
 (function(){
 var boxes=[],els,i,l;
 if(document.querySelectorAll){
 els=document.querySelectorAll('a[rel=progress]');
 Box.getStyles('progress_css','https://site.ru/sbox/progress.css');
 Box.getScripts('progress_js','https://site.ru/sbox/progress.js',function(){
 progress.init();
 for(i=0,l=els.length;i<l;++i)
 progress.start(els[i]);
 progress.start('a[rel=progress_group]');
 });
 }
 })();</script>

Конечно же ставлю адрес своего сайта в нужных местах. Скрип установлен.

Как увеличить фото в статье ?

Все очень просто. Для начала выбираем фото и добавляем его в медиафайлы

vstavit-mediafajl

Смотрим в настройки, и выбираем Медиафайл. Это обязательное условие.

nastrojki-otobrazheniya-fajla

Добавляем изображение в статью и нажимаем на карандашик, редактируем его.redaktirovat-izobrazhenieЗаходим в настройки отображения, выбираем размер — произвольный, или тот который нужен именно в статье, у меня это ширина 600 px.

nastrojki-otobrazheniya

А в дополнительных настройках, пишем progress, это позволит увеличить изображение по клику на весь экран, но не за его рамки, смотрится очень красиво.
dopolnitelnye-nastrojki-izobrazheniya

Вывод

Вы можете наслаждаться результатом ниже, я добавил красивое изображение большего размера. До встречи на страницах сайта qoogi.com

qoogi

Простая реклама, которую не блокирует AdBlock

Огромной палкой в колесах современного администратора сайта является AdBlock. Он блокирует не только всякую навязчивую, не приятную и шокирующую рекламу, выпрыгивающие окошка или другие не приятные анимации, но также блокирует обычную контекстную рекламу, на которой и зарабатываю честные блогеры. AdSense и Яндекс Директ , даже не собираются нам помогать, решить этот вопрос, а кризис еще больше усугубил наше положение. По этому, как всегда, приходится брать ситуацию в свои руки.

Простая реклама, которую не блокирует AdBlock

Я не стал изобретать новое, а просто объединил уже имеющееся в наличии.

prostaya-reklama-kotoruyu-ne-blokiruet-adblockПокажу на примере Макхост — это мой хостинг, рекомендую. Реклама сделана на основе текстового виджета Word Press. Но с некоторыми изменениями и дополнениями в коде.

Реклама получается полностью кликабельной и открывается в новой вкладке браузера.

Как сделать баннер

Для начала нам нужен простой баннер. Я воспользовался фотошопом, сделал картинку нужного размера формата png, думаю для вас это не сложно.kak-sdelat-banner-dlya-sajta

После этого с помощью filezilla, я создал в папке сайта папку с именем — banner, это пригодится и в будущем. И загрузил туда эту картинку, имя и путь к картинке, нам пригодятся для вставки в виджет.

Как закрыть ссылки от индексации поисковиками ?

Мы же не хотим, что бы поисковики считали сайт не качественным, индексируя рекламные ссылки. Чем больше ссылок ведет от сайта, тем больше веса он теряет, и нет ниже он падает в результатах поиска. По этому для начала я закрою все рекламные ссылки от индексации в масштабах всего сайта. Тем более что с недавних пор, теги noindex и nofollow не учитываются поисковиками.

  1. С помощью той же filezilla, заходим в папку сайта, темы, папку актуальной темы, и скачиваем файлы :«footer.php», «style.css», «functions.php», сохраняем их на компьютере в отдельный каталог, я его назвал — оригинальные файлы темы сайта.
  2.  Открываем и редактируем первый файл «footer.php», конечно используя notepad ++. Здесь нужно внести всего одно дополнение, а именно в самом низу перед закрывающим тегом </body> вставить следующий код:
<script type= "text/javascript">function GoTo(link){window.open(link.replace("_","https://"));}</script>

Измененный файл сохраняем как, в другую папку на компьютере, я ее назвал — редактированные файлы темы сайта.

3. Далее, для того что бы наши ссылки, имели более естественный вид и при наведении на них курсора, они меняли цвет, нужно отредактировать второй файл «style.css». Редактируем, вставляем следующий код в сам низ, после всех символов:

.spanlink {
color: #006699; /*цвет ссылки*/
cursor:pointer; /*курсор при наведении на ссылку*/
}
.spanlink:hover {
color: #006699; /*цвет ссылки при наведении*/
text-decoration: underline; /*подчёркивание при наведении*/
}

Также сохраним как, в туже папку с новыми файлами. Конечно вы можете корректировать цвета под свою тему, но я этого не делал, мне и так нравится.

4. Ссылки уже будут скрываться на сайте, если их обрамить в такой код:

<span class="spanlink" onclick="GoTo('https:/http://qoogi.com')">Мой сайт: «qoogi»</span>

Такая ссылка индексируется как обычный текст.

5. Для автоматизации закрытия ссылок с статьях на всем сайте, нужно внести изменения в последний файл «functions.php. Просто открываем файл для редактирования, и в конце страницы вставляем код:

function replaсe_link($content) {
 
$pattern = '/\[urlspan\](.*?)<a (.*?)href=[\"\']([a-zA-Z]+:\/\/)?(.*?)[\"\'](.*?)>(.*?)<\/a>(.*?)\[\/urlspan\]/i';
 
$content = preg_replace($pattern, "$1<span class='spanlink' onclick=\"GoTo('_$4')\"><span>$6</span></span>$7", $content);
 
return $content;
 
}
 
add_filter('the_content', 'replaсe_link');

Теперь для закрытия ссылок в статье нужно применить код:

[urlspan]<a href="http://qoogi.com">Мой сайт: «qoogi»</a>[/urlspan]

А если ссылка в виджете, как у меня сейчас, нужно использовать вот такой код:

<span class="spanlink" onclick="GoTo('http://qoogi.com')">Мой сайт: «qoogi»</span>

Осталось только загрузить и перезаписать отредактированные файлы обратно на сайт, в папку с темой сайта, с помощью той же filezilla.

Теперь никакая не нужная индексация мне не страшна, тем более блокировка с помощью AdBlock.

Итог: Рекламный виджет

Ну и самое главное, для чего все это было нужно. Теперь нужно создать код текстового виджета. Я сделал вот такой, скрилл при этом ссылки от индексирования, а также обеспечил открытие рекламной ссылки на новой вкладке. Ну и конечно для законченного вида указал путь к созданной в начале картинки.

<span class="spanlink" onclick="GoTo('https://mchost.ru/?referer=1834673522')">
<img class="aligncenter wp-image-11695 size-thumbnail" src="http://qoogi.com/wp-content/banner/mchost.png" alt="лучший хостинг">
</span>

<h1 style="text-align: center;"><b>Промо
Код 346C-7EF2-6FB0-7E85</b></h1>

Надеюсь информация была вам полезна.

До встречи на страницах сайта qoogi.com