Создание сайта с нуля на Вордпресс

Установка WordPress. Настройка WordPress. Обновление WordPress. Шаблоны WordPress.

Создание сайта с нуля на Вордпресс

Новое сообщение pessimist » 13 фев 2016, 19:05

Здравствуйте, уважаемые форумчане!

Я позволю себе несколько слов, почему я открыл эту тему.

В 2012 году с помощью участников этого форума и нескольких других я создал свой первый блог на Вордпресс. Поэтому очень хочется сказать несколько теплых слов в адрес следующих участников этого форума:
leaves, WebEcom, ssabbas, Alexander, Надежда Лимонникова.

Большое спасибо за полезную информацию и помощь.

Отдельную благодарность хочется выразить моим практическим наставникам:
cefp, Николай

Да и вообще, спасибо, всем тем, кто не остался в стороне и написал что-нибудь полезное или просто ободряющее.

Сегодня я собираюсь создать с нуля еще один сайт на Вордпресс и также надеюсь на помощь участников форума. Тех, кто готов поделиться своими знаниями и советами.

Создание сайта с помощью Вордпресс напоминает мне игру в куклы. Сначала берется голая кукла. Затем она одевается в различные наряды (это огромное разнообразие тем для Вордпресс). После того, как кукла одета - она идет в школу и приобретает новые навыки (расширение умений сайта с помощью многообразия различных плагинов для Вордпресс) и начинает свою нелегкую жизнь (наполняется статьями).

Потом эту куклу нужно выдать замуж (обручить с поисковыми системами) и следить за тем, чтобы она не развелась или не овдовела (получила фильтр в поисковых системах). В своей жизни ей помогают родственники и друзья (переходы с авторских или дружественных сайтов).

Может именно поэтому система Вордпресс так любима женщинами разных мастей, от сидящих в декрете мамочек до энергичных пенсионерок.

Продолжая свою, слегка ироничную, аналогию я решил одеть свою новую куклу, а вернее выбрать для нее тему. Почему я решил сначала озаботиться именно выбором темы? Да потому, что если одеть куклу в бальное платье - как ее потом учить месить бетон?

Оставлю аналогии в стороне, тем более, что я - мальчик и куклы - это не мое. Мое - это конструктор.

Я долго блуждал в многообразии тем и наконец остановил свой взгляд на теме Catch Box. Эта простая, коробчатая тема, мне приглянулась по следующим причинам:

1) Она часто обновляется, обнаруженные ошибки исправляются оперативно. А не ошибается тот, кто ничего не делает. Мне не известны бесплатные темы без "косячков".
2) У этой темы хорошая мобильная версия, а как известно, Гугл пристально смотрит на наличие мобильной версии сайта, да и Яндекс уже включил наличие такой версии в свои рекомендации.
3) Эта тема легко настраивается под нужды ее пользователя.
4) У этой темы есть несколько цветовых схем оформления, переключаться от одной - к другой можно просто через настройки в админ-панели.

Вот скрин шаблона до подстройки под нужды пользователя:

test.png
Стандартная установка

А вот скрин подстройки шаблона, где я уже немного "подкрутил гаечки":

test_1.png
На мой вкус и цвет поднастроенная


А теперь, уважаемые форумчане, прошу высказаться тех, кто уже использует эту тему или отказался от нее по каким-то своим соображениям.

Для того, чтобы немного модифицировать шаблон темы, я создал дочернюю тему Cath Box, поэтому все обновления родительской темы не затрагивают моих "подкрученных гаечек". Но есть одна проблемка. Не понимаю почему, но после создания дочерней темы, немного страдает меню мобильной версии. Сам значок меню, вместо того, чтобы оставаться в крайнем левом положении - съезжает ближе к середине.

До создания дочерней темы:

Screenshot_2016-02-13-14-41-21.png
Мобильная версия до создания дочерней темы


После создания дочерней темы:

Screenshot_2016-02-13-14-39-13.png
Мобильная версия сразу после создания дочерней темы



Вот такие небольшие трудности с темой Catch Box, но она мне все-равно очень понравилась. Как только тема выбрана - можно выбирать плагины, но об этом я напишу позже.

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

Subscribe.png
Как подписаться на оповещения о новый сообщениях в теме
Аватар пользователя
pessimist
Авторитетный оратор
 
Сообщений: 404
Зарегистрирован: 18 фев 2012, 11:34
Откуда: Санкт-Петербург

Re: Создание сайта с нуля на Вордпресс

Новое сообщение Николай » 14 фев 2016, 13:32

Благодарю за теплые слова.
Ссылка на шаблон "Catch Box" для CMS WordPress: catchthemes.com/themes/catch-box/
Републикация и цитирование материалов на сторонних веб-ресурсах разрешается, при условии сохранения авторства и прямой, активной, индексируемой ссылки на форум http://forum.e-proficom.ru
Аватар пользователя
Николай
Руководитель
 
Сообщений: 1348
Зарегистрирован: 08 дек 2009, 15:17
Откуда: Россия

Re: Создание сайта с нуля на Вордпресс

Новое сообщение pessimist » 17 фев 2016, 17:19

Так мне понравилась эта тема Catch Box, что я ее поставил на старый блог. Тем более, что Яндекс вынудил меня что-то предпринять с блогом из-за мобильной версии. Сначала ругался, что нет мобильной версии для страниц RSS ленты. Я их сначала закрыл в robots.txt, а потом нашел какую-то функцию, которая фильтрует генерацию страниц RSS ленты. Но все оказалось напрасно. После очередной индексации Яндекс заругал те страницы, которые раньше не трогал.

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

Таким образом, оценить тему можно не только по скринам из первого поста, но и рассмотреть ее на блоге. На блоге в версии для ПК она немного растянута по ширине относительно стандартной установки, чуть-чуть увеличен шрифт. Я стал хуже видеть, уже приобрел себе очки :)

Мобильную версию я не трогал, она мне нравится и такой.

Как говорится, "легким движением руки..." в админ-панели можно изменить цветовую схему темы и макет дизайна. На выбор предлагается семь цветовых схем и три макета дизайна:

1) дизайн с правым сайдбаром
2) дизайн с левым сайдбаром
3) дизайн без сайдбара, в одну колонку (хидер и футер, естественно прилагаются)

Собственно, вот так выглядят настройки темы Catch Box в админ-панели Вордпресс:

catchbox.png
Семь цветовых схем и три макета дизайна от темы Catch Box


P.S. Особенно меня порадовало то обстоятельство, что смена темы прошла практически безболезненно для блога, т.е. старые записи и комментарии одели новую одежку, при этом ни один кролик, что называется, не пострадал. Единственная неприятность, это то, что в мобильной версии вылезает за пределы рекламный блок Гугл-Адсенса. Это самый доходный блок, размером 728x90 размещается в самом начале статьи и такой же в самом конце. В общем-то, его наверное можно обернуть дивами в именной блок и в мобильной версии выключать свойством display: none;, но есть опасения, не сочтет ли Яндекс такое выключение за "клоакинг"?
Аватар пользователя
pessimist
Авторитетный оратор
 
Сообщений: 404
Зарегистрирован: 18 фев 2012, 11:34
Откуда: Санкт-Петербург

Re: Создание сайта с нуля на Вордпресс

Новое сообщение pessimist » 23 фев 2016, 00:21

Когда Вордпресс установлен и выбрана тема - всегда хочется что-нибудь чуть-чуть поменять.

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

Или обновить тему и все свои изменения вносить по новой - или не обновлять тему, но остаться без устранения обнаруженных разработчиком ошибок и уязвимостей для безопасности.

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

1) Создать в папке /public_html/wp-content/themes/ новую папку с любым именем. Правда, удобнее все-таки назвать ее также как родительскую, с добавлением слова ребенок на английском, через символ подчеркивания.
Например, выбранная мною тема находится в папке: /public_html/wp-content/themes/catch-box/. Я беру имя папки родительской темы catch-box и добавляю _child. Таким образом, моя дочерняя тема будет находиться в папке с названием: /public_html/wp-content/themes/catch-box_child/

2) В пустой папке будущей дочерней темы необходимо создать текстовый файл стилей с именем style.css и прописать заголовок, который и укажет родителя для темы. Заголовок выглядит так:

Код: выделить все
/*
Theme Name:     Catch Box Child
Description:    Это дочерняя тема для Catch Box Мой первый опыт.
Author:         Денис Тимофеев
Template:       catch-box
Version:        0.0.1
*/


В этом заголовке после:

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

Description: можно написать краткое описание темы, которое будет отображаться в админ-панели Вордпресс в меню "Темы"

Author: можно написать себя, если вы не страдаете от скромности, эта информация тоже будет отображаться в админ-панели Вордпресс в меню "Темы"

Template: необходимо точно написать имя папки родительской темы, именно по этой строке Вордпресс узнает на основе какого родителя создается наша дочерняя тема. Имя папки родителя лучше даже скопировать, чтобы избежать опечаток.

Version: можно написать версию своей дочерней темы.

Заполнение этой шапки для CSS не имеет никакого значения, так как весь текст заключен в символы-скобки обозначающие в CSS комментарии. Значение этой шапки необходимо для движка Вордпресс. После прочтения такой шапки, Вордпресс заменяет файл стилей родительской темы на файл стилей дочерней. Так как, с точки зрения CSS файл пустой, то необходимо сделать третий шаг:

3) Подключить к созданному файлу стилей файл стилей родительской темы. Это можно сделать дописав после закомментированной шапки следующую строку:

Код: выделить все
@import url("../catch-box/style.css");


Очень важно эту строку написать сразу после шапки и только потом начинать перекрывать неугодные стили или их свойства. Смысл строки прост. Файл стилей находится по адресу, заключенному в двойные кавычки.
Адрес относительный. Две точки означают, что для поиска файла родительской темы style.css нужно подняться на один уровень вверх из папки: /public_html/wp-content/themes/catch-box_child/ в папку:
/public_html/wp-content/themes/, а уже оттуда опуститься в папку /catch-box/ и найти там файл style.css

В конце-концов файл стилей дочерней темы должен по минимуму быть с таким текстом:

Код: выделить все
/*
Theme Name:     Catch Box Child
Description:    Это дочерняя тема для Catch Box Мой первый опыт.
Author:         Денис Тимофеев
Template:       catch-box
Version:        0.0.1
*/

@import url("../catch-box/style.css");


После этих нехитрых трех шагов можно устанавливать в админ-панели Вордпресс дочернюю тему, в качестве активной. Чтобы дочерняя тема имела собственную картинку-изображение в админ-панели нужно собственное изображение сохранить в файле с именем screenshot.png и разместить его в папке дочерней темы: /public_html/wp-content/themes/catch-box_child/

После активации дочерней темы нужно скопировать те файлы, внутри которых мы планируем поковыряться из родительской темы в дочернюю. Например, мы скопируем файл footer.php в папку дочерней темы и немного изменим его код.

Вордпресс сначала будет искать footer.php в папке дочерней темы и если найдет - то будет выполнять именно его. А вот если не найдет - тогда будет искать файл footer.php в папке родительской темы.

Немного отличается подход Вордпресса к файлу functions.php. Здесь Вордпресс использует оба файла. Сначала выполняются функции дочерней темы, а затем - родительской. Если в родительской теме функция написана так, что позволяет перекрытие, то в дочерней теме можно создать другую функцию с таким же именем, но другим кодом.
Аватар пользователя
pessimist
Авторитетный оратор
 
Сообщений: 404
Зарегистрирован: 18 фев 2012, 11:34
Откуда: Санкт-Петербург

Re: Создание сайта с нуля на Вордпресс

Новое сообщение Николай » 23 фев 2016, 17:02

pessimist писал(а):Таким образом, оценить тему можно не только по скринам из первого поста, но и рассмотреть ее на блоге. На блоге в версии для ПК она немного растянута по ширине относительно стандартной установки, чуть-чуть увеличен шрифт. Я стал хуже видеть, уже приобрел себе очки :)


На мой взгляд, новый дизайн блога, смотрится более современно, жизнерадостно, оптимистично (темные цвета ушли и теперь преобладают белый, светло-синий, синий).
Републикация и цитирование материалов на сторонних веб-ресурсах разрешается, при условии сохранения авторства и прямой, активной, индексируемой ссылки на форум http://forum.e-proficom.ru
Аватар пользователя
Николай
Руководитель
 
Сообщений: 1348
Зарегистрирован: 08 дек 2009, 15:17
Откуда: Россия

Re: Создание сайта с нуля на Вордпресс

Новое сообщение pessimist » 23 фев 2016, 17:06

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


Большое спасибо! Мнение форумчан очень важно для меня, особенно приятно, когда оно - положительное :mrgreen:
Аватар пользователя
pessimist
Авторитетный оратор
 
Сообщений: 404
Зарегистрирован: 18 фев 2012, 11:34
Откуда: Санкт-Петербург

Re: Создание сайта с нуля на Вордпресс

Новое сообщение pessimist » 28 фев 2016, 20:01

В предыдущем посте я много писал о создании родительской темы для Вордпресс.

Я упомянул о возможном возникновении желания поменять чуть-чуть подвал сайта. А вернее, изменить надписи и удалить лишние ссылки.

Вот так выглядит подвал родительской темы:

footer_r.png
Так выглядит подвал во вновь установленной теме Catch Box


Тема Catch Box очень хорошая и разработчики темы достойны благодарности и уважения. Но вот внешняя ссылка на всех страницах молодого сайта губительна. Как быть? Для того, чтобы изменить внешний вид подвала я предлагаю следующее:

Скопировать файл footer.php из папки родительской темы по адресу:

Код: выделить все
/public_html/wp-content/themes/catch-box/


И разместить этот файл в папке дочерней темы по адресу:

Код: выделить все
/public_html/wp-content/themes/catch-box_child/


Теперь можно приступить к редактированию, скопированного в папку дочерней темы, файла. То есть, его можно оставить полностью "как есть" за исключением маленького кусочка кода, который следует удалить. Если у вас файл footer.php из первоисточника, то нужно удалить строки кода начиная со строки №58 по №66 включительно. И написать туда новый код:

Код: выделить все
2012-<?php printf( date( __( 'Y', 'catch-box' ) )) ?> @ Копирование материалов сайта запрещено. Автор.


Если сравнить файлы родительской и дочерней темы - получится следующая картина:

sravnenie_2.png
в итоге в коде родительского footer.php и дочернего footer.php должна быть следующая разница


В новом файле дочерней темы footer.php в строке №58 будет код всего в одну строчку.

sravnenie_3.png
Новый код для файла дочерней темы footer.php


Как только в папке дочерней темы появится новый файл footer.php, так Вордпресс начнет отображать подвал сайта в соответствии с кодом нового файла. Вот так выглядит "новый" подвал у сайта.

footer_d.png
Вот так будет выглядеть подвал сайта после создания файла footer.php в папке дочерней темы Catch Box


При этом, если удалить файл footer.php из дочерней темы, то отображение подвала сайта вернется к исходному, потому что будет использован файл footer.php из родительской темы. Это обстоятельство является очень удобным, когда вносятся изменения в коды файлов дочерней темы. Бекапиться уже не так обязательно после ввода каждой строчки. В случае фатальной неудачи - испорченный файл дочерней темы можно просто удалить и вместо него начнет работать файл из родительской темы - то есть сайт не пострадает.

Для тех, кто не очень уверен в своих собственных силах, ниже я привожу код, который должен содержать файл footer.php в дочерней теме. Можно скопировать этот код прямо из сообщения и сохранить в чистый файл с именем footer.php и разместить его в папке дочерней темы по адресу:

Код: выделить все
/public_html/wp-content/themes/catch-box_child/


В новый файл footer.php размещаемый по адресу указанному выше вставить этот код:

Код: выделить все
<?php
/**
* The template for displaying the footer.
*
* Contains the closing of the id=main div and all content after
*
* @package Catch Themes
* @subpackage Catch Box
* @since Catch Box 1.0
*/
?>

   </div><!-- #main -->

   <?php
    /**
     * catchbox_after_main hook
     */
    do_action( 'catchbox_after_main' );
    ?>     

   <footer id="colophon" role="contentinfo">
      <?php
        /**
         * catchbox_before_footer_menu hook
         */
        do_action( 'catchbox_before_footer_sidebar' );
   
      /* A sidebar in the footer? Yep. You can can customize
       * your footer with three columns of widgets.
       */
      get_sidebar( 'footer' );
            
      /**
       * catchbox_before_footer_menu hook
       */
      do_action( 'catchbox_after_footer_sidebar' );
      
      /**
       * catchbox_before_footer_menu hook
       */
      do_action( 'catchbox_before_footer_menu' );    

         /**
          * catchbox_before_footer_menu hook
          *
          * @hooked catchbox_footer_menu_display - 10
          * @hooked catchbox_mobile_footer_menu - 20
          */
         do_action( 'catchbox_footer_menu' );
      
      /**
       * catchbox_before_footer_menu hook
       */
      do_action( 'catchbox_after_footer_menu' ); ?>
       
        <div id="site-generator" class="clearfix">
            2012-<?php printf( date( __( 'Y', 'catch-box' ) )) ?> @ Копирование материалов сайта запрещено. Автор.
   
        </div> <!-- #site-generator -->       
       
   </footer><!-- #colophon -->
   
</div><!-- #page -->

<?php
/**
* catchbox_after hook
*
* @hooked catchbox_scrollup - 10
* @hooked catchbox_mobile_menus - 20
*/
do_action( 'catchbox_after' );
?>

<?php wp_footer(); ?>


</body>
</html>
Аватар пользователя
pessimist
Авторитетный оратор
 
Сообщений: 404
Зарегистрирован: 18 фев 2012, 11:34
Откуда: Санкт-Петербург

Re: Создание сайта с нуля на Вордпресс

Новое сообщение pessimist » 07 мар 2016, 14:27

После того, как тема выбрана установлена и настроена - самое время расширить функционал Вордпресс с помощью плагинов.
Вообще, прежде, чем принимать решение об установке того, или иного плагина, необходимо понимать, что плагины не только дополняют возможности, но и нагружают сайт.
Установка плагинов всегда сказывается на быстродействии сайта.

Еще один аспект, который нельзя упускать из виду при выборе и установке плагинов - это безопасность.
Один из участников этого форума (а именно, уважаемый WebEcom) открыл целую тему по этому вопросу. И хотя, сообщения были написаны достаточно давно - они до сих пор, практически, не утратили актуальность.
Вот ссылка на эту тему: Несколько советов по защите своего блога на CMS WordPress

На какую бы тему не создавался сайт под управлением CMS Wordpress я бы рекомендовал установить следующий минимальный набор плагинов:

Akismet - комментарии всегда положительно сказываются на посещаемости из поисковых систем, но боты-пауки стремятся засорить незащищенный сайт спам-комментариями. Спам-комментарии негативно влияют на сайт, так как их наличие говорит о плохой модерируемости ресурса для поисковых систем и они понижают позиции статей заспамленного сайта в поисковой выдаче. Данный плагин бесплатно позволяет защититься от вредоносных ботов, помещая откровенный спам в отдельную папку, не доступную для просмотра из сети Интернет.

All In One SEO Pack - если вы хотите, чтобы поисковые системы, основные поставщики посетителей на ваш сайт, полюбили ваш сайт, установка этого плагина просто необходима. Дело в том, что Вордпресс не заполняет тег description, а именно из этого мета-тега поисковые системы формируют сниппет в поисковой выдаче. Поисковые системы, конечно, справляются с созданием сниппета и без заполнения этого тега, но всегда ставят некоторый минус сайту, если им приходится делать это самостоятельно. Данный плагин формирует заполнение тега description автоматически и, вместе с тем, позволяет ввести его содержание вручную, потому что человек всегда это делает лучше, чем программа. Для тех, кому неизвестно слово сниппет, я разместил два скриншота с пояснениями, что это за зверь.

snippet_google.png
Вот так выглядит сниппет в поисковой системе Гугл


snippet_yandex.png
Вот так выглядит сниппет в поисковой системе Яндекс


Еще одним аргументом для установки этого плагина является возможность автоматической генерации карты сайта в формате sitemap.xml. Такую карту рекомендуют составлять поисковые системы для удобства индексации страниц сайта. Создавать файл такой карты в рукопашную весьма утомительное занятие, а если статей много и они часто редактируются - вообще нецелесообразное. Бесплатного функционала плагина вполне достаточно для решения этих задач в автоматическом режиме. Также есть возможность указать, какие страницы сайта не следует включать в sitemap.xml при автоматической генерации. Это удобно, потому что можно исключить страницы закрытые для индексации поисковыми системами в файле robots.txt.

WP Sitemap Page - всегда неплохо, когда есть некоторая страница на сайте, которая содержит ссылки на все страницы сайта с заголовками этих страниц. Ее обычно называют картой сайта для пользователей. Например, Яндекс официально рекомендует создавать такую страницу для лучшей индексации страниц сайта. Плагин имеет достаточно гибкие настройки, поэтому карту сайта для пользователей всегда можно привести к желаемому виду. На моем блоге карта сайта генерируется именно этим плагином.

Было бы здорово, если бы кто-нибудь из более опытных форумчан дополнил этот список.
Аватар пользователя
pessimist
Авторитетный оратор
 
Сообщений: 404
Зарегистрирован: 18 фев 2012, 11:34
Откуда: Санкт-Петербург

Re: Создание сайта с нуля на Вордпресс

Новое сообщение pessimist » 21 мар 2016, 18:49

Здравствуйте, уважаемые форумчане!

У темы catchbox адаптивный дизайн. Это значит, что оформление сайта подстраивается под экран устройства, на котором он просматривается.
При встраивании собственных элементов в страницы сайта следует учитывать типоразмеры устройств, при которых тема изменяет дизайн.

Для этого собственные элементы можно обернуть тегами

Код: выделить все
<div id="ваш_селектор">ваш_элемент_HTML</div>


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

Код: выделить все
@media screen and (max-width: 1024px) {
#ваш_селектор {
   ваш_стиль: свойство_стиля;
}
}
@media screen and (max-width: 990px) {
#ваш_селектор {
   ваш_стиль: свойство_стиля;
}
}
@media screen and (max-width: 960px) {
#ваш_селектор {
   ваш_стиль: свойство_стиля;
}
}
@media screen and (max-width: 782px) {
#ваш_селектор {
   ваш_стиль: свойство_стиля;
}
}
@media screen and (max-width: 767px) {
#ваш_селектор {
   ваш_стиль: свойство_стиля;
}
}
@media screen and (max-width: 640px) {
#ваш_селектор {
   ваш_стиль: свойство_стиля;
}
}
@media screen and (max-width: 600px) {
#ваш_селектор {
   ваш_стиль: свойство_стиля;
}
}
@media screen and (max-width: 479px) {
#ваш_селектор {
   ваш_стиль: свойство_стиля;
}
}
@media screen and (max-width: 320px) {
#ваш_селектор {
   ваш_стиль: свойство_стиля;
}
}


В качестве собственных элементов могут выступать сторонние скрипты, выводящие на экран изображения или элементы управления.
Разумеется, дописывать стили следует в файл стилей "дочерней" темы catchbox, чтобы внесенные изменения не затерлись при обновлении темы. О том, как создать "дочернюю" тему я писал в предыдущих постах.
Аватар пользователя
pessimist
Авторитетный оратор
 
Сообщений: 404
Зарегистрирован: 18 фев 2012, 11:34
Откуда: Санкт-Петербург

Re: Создание сайта с нуля на Вордпресс

Новое сообщение pessimist » 05 апр 2016, 18:43

Здравствуйте, уважаемые форумчане и читатели форума!

Выше я упомянул о возможном возникновении желания поменять чуть-чуть подвал сайта. А теперь я хочу рассказать как я решил изменить шапку сайта для Вордпресс. Или, говоря более техническими терминами, изменить файл header.php.

Зачем мне понадобилось изменять шапку сайта? Ну, тема Catch Box имеет очень строгий дизайн, а мне захотелось воткнуть в шапку сайта баннер.
Иными словами - произвольную картинку со ссылкой для перехода.

В шапку своего блога такую картинку я воткнул. Но вот какая интересная проблема обнаружилась. Ссылка из верхнего баннера вела на мою культовую статью "Секреты денег". И на вебвизоре я увидел, как бедный мой читатель, прочитавший мою статью целиком, поднялся наверх и ...
Желая узнать что-то новое кликнул по баннеру, который ведет на ту статью, которую читатель только что читал.

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

Такая задачка решается с помощью простого выражения на php.

В текст файла header.php нужно добавить строки кода php.
На картинке ниже выделено сереньким цветом место, куда следует вставлять свой собственный код. Новый код начинается с группы символов <?php и заканчивается группой символов ?> Эта группа символов обозначает начало и конец кода языка php.
header.png
Место вставки собственного кода баннера в текст файла header.php

Теперь поподробнее о коде.

1) Шаг

На первом шаге следует получить в переменную $Path относительный адрес текущей веб страницы.
Сделать это можно с помощью следующего выражения:
Код: выделить все
$Path=$_SERVER['REQUEST_URI'];

После выполнения выражения в переменной $Path будет примерно следующее содержимое:
/?p=1996

2) Шаг
На втором шаге сохраненный в переменной $Path относительный адрес следует сцепить с основным доменом сайта и получившийся абсолютный адрес сохранить в переменной $URI. Сделаем это с помощью следующего выражения:

Код: выделить все
$URI='http://www.vash_domen.ru'.$Path;


После выполнения этого выражения в переменной $URI будет храниться абсолютный адрес текущей веб страницы примерно следующего вида:
Код: выделить все
http://www.vash_domen.ru/?p=1996


3) Шаг

Создание условного оператора. По моей задумке все баннеры сайта должны вести на одну страницу, допустим, страницу "Цель".
Известно, что у страницы цель будет абсолютный адрес:
Код: выделить все
http://www.vash_domen.ru/?p=1996

Тогда можно сделать условие: "если адрес текущей страницы не равен адресу
Код: выделить все
http://www.vash_domen.ru/?p=1996

тогда показывать баннер 1, в противоположном случае показать баннер 2. На php этот оператор будет выглядеть так:

Код: выделить все
if ($URI != 'http://www.vash_domen.ru/?p=1996') echo 'баннер 1';
else echo 'баннер 2';


4) Шаг

Теперь нужно подготовить код HTML для баннера 1 и баннера 2.

Под баннером я подразумеваю обычную гиперссылку с картинкой. Для баннера 1 это будет ссылка на страницу "Цель" с картинкой
Код: выделить все
<a href="http://www.vash_domen.ru/?p=1996"><img src="http://www.vash_domen.ru/wp-content/uploads/2016/04/image_1.png" alt="image_1"></a>

Когда посетитель просматривает страницу "Цель" ему нужно показать баннер 2. Для баннера 2 это будет гиперссылка ведущая на любую другую страницу вашего сайта и другой картинкой. Например, так:
Код: выделить все
<a href="http://www.vash_domen.ru/?p=2000"><img src="http://www.vash_domen.ru/wp-content/uploads/2016/04/image_2.png" alt="image_2"></a>


5) Шаг

Наконец мы готовы к тому, чтобы в условный оператор php вставить соответствующие коды HTML баннера 1 и баннера 2
Код HTML помещается между двумя апострофами оператора php echo. У нас два таких оператора. Один в блоке выполнения оператора if и второй в блоке выполнения оператора else. Вот так должен выглядеть условный оператор php со вставленным кодом HTML для баннеров.

Код: выделить все
if ($URI != 'http://www.vash_domen.ru/?p=1996') echo '<a href="http://www.vash_domen.ru/?p=1996"><img src="http://www.vash_domen.ru/wp-content/uploads/2016/04/image_1.png" alt="image_1"></a>';
else echo '<a href="http://www.vash_domen.ru/?p=2000"><img src="http://www.vash_domen.ru/wp-content/uploads/2016/04/image_2.png" alt="image_2"></a>';


6) Шаг

Подготовка кода для вставки в текст файла header.php Для того, чтобы вставленный код было легко найти в тексте и редактировать нужны комментарии.
Рекомендую вставить их обязательно. Для сайта
Код: выделить все
http://www.vash_domen.ru

должен получиться вот такой код:
Код: выделить все
<?php
/*Начало экспериментов с языком php*/
$Path=$_SERVER['REQUEST_URI'];
$URI='http://www.vash_domen.ru'.$Path;
if ($URI != 'http://www.vash_domen.ru/?p=1996') echo '<a href="http://www.vash_domen.ru/?p=1996"><img src="http://www.vash_domen.ru/wp-content/uploads/2016/04/image_1.png" alt="image_1"></a>';
else echo '<a href="http://www.vash_domen.ru/?p=2000"><img src="http://www.vash_domen.ru/wp-content/uploads/2016/04/image_2.png" alt="image_2"></a>';
/*Конец экспериментов с языком php*/
?>


Полученный код полностью готов к вставке в файл header.php. Для файла header.php темы Catch Box это можно сделать начиная с 78 строки текста. На картинке выше вставленный код выделен серым. Если вы редактируете файл header.php из административной панели Вордпресса, то номеров строк у вас не будет, поэтому сориентируйтесь по фрагментам кода, чтобы найти нужное место для вставки. В других темах это будет другая строка, но принцип остается неизменным.

Уважаемые форумчане и посетители форума, если кому-то нужно вставить баннер в хидер сайта на Вордпрессе и этот пост не помог - не стесняйтесь, задавайте свои вопросы в этой теме. В этой теме вас никто не пошлет к поиску по форуму, Гуглу или еще дальше.
Аватар пользователя
pessimist
Авторитетный оратор
 
Сообщений: 404
Зарегистрирован: 18 фев 2012, 11:34
Откуда: Санкт-Петербург

След.

Вернуться в Сайтостроение на CMS WordPress

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1