Начало работы с WordPress: изменение структуры вашего сайта

Содержание цикла статей "Начало работы с WordPress":

1. Начало работы с WordPress: выбор между WordPress.com и WordPress.org
2. Начало работы с WordPress: подготовка к настройке WordPress на отдельном хостинге
3. Начало работы с WordPress: ручная установка WordPress
4. Начало работы с WordPress: первые шаги по совершенствованию вашего нового сайта
5. Начало работы с WordPress: подготовка к созданию вашей собственной темы на основе дочерней
6. Начало работы с WordPress: изменение внешнего вида вашего сайта с помощью CSS
7. Начало работы с WordPress: изменение структуры вашего сайта
8. Начало работы с WordPress: настройка функциональности сайта посредством редактирования functions.php

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

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

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

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

Так или иначе, вернемся к нашему сегодняшнему уроку!

До того, как мы начнем, нам понадобится:

• FTP-доступ к вашему сайту;
• текстовый редактор.

Что мы будем делать:

• настраивать стандартный футер (на жаргоне «подвал»), то есть нижнюю часть страницы в WordPress, добавив в него собственную ссылку и контент;
• перемещать основную панель навигации выше заголовка;
• создавать описание страницы, используя настраиваемые поля.

В качестве введения, я хочу прояснить вам кое-что насчет шаблонов в темах WordPress и то, как они работают в контексте дочерней темы. Как вы помните, на данном этапе наша тема пока еще не включает шаблоны на языке PHP.

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

• Codex: Stepping into Templates;
• Codex: Templates;
• Дочерние темы.

Шаблон (Template) это файл, а точнее будет сказать программа, которая управляет тем, как WordPress будет отображать ваш сайт в Интернете. Эти файлы запрашивают информацию из базы данных MySQL и генерируют HTML-код, которые отправляется веб-браузеру. И, хотя механизм настройки тем очень гибкий, WordPress позволяет вам определять неограниченное количество шаблонов для одной темы.

В свою очередь, тема (Theme) – это набор файлов, определяющий внешний вид (слой представления) вашего сайта на WordPress.

Если вы посмотрите на свою тему, то обнаружите, что на данный момент, в ее директории отсутствуют какие-либо шаблоны. Нужно ли мне вам напомнить почему?

Думаю, вы помните, что наша тема является дочерней, поэтому все шаблоны хранятся в папке с родительской темой.

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

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

Это было небольшое введение в терминологию. А теперь, давайте приступим к освоению навыков, которые помогут нам менять внутреннюю структуру темы.

Создание/копирование файлов в дочернюю тему

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

Метод 1

Вы можете перетащить файлы с диска удаленного сервера на свой локальный компьютер, используя FTP-клиент.

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

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

Метод 2

Мы также можем задать закладку для нашего FTP-сервера в текстовом редакторе Text Wrangler. Тогда у нас появится возможность сохранить файл прямо на сервер. Делается это так:

• Находясь в Text Wrangler, перейдите в меню «Text Wrangler>Настройки» (Text Wrangler >Setup);
• На вкладке закладки «Закладки» (Bookmarks) нажмите значок «+» в левой нижней части окна, чтобы создать новую закладку.

Заполните поля данными для доступа к вашему FTP-серверу, аналогично тому, как делали это при первоначальной настройке FileZilla.

Теперь, находясь в FileZilla, нажмите правой кнопкой мыши на файле, который вы хотите скопировать (в нашем случае, footer.php), и выберите в контекстном меню опцию редактирования, после чего этот файл откроется в Text Wrangler.

Затем, в Text Wrangler выберите в главном меню «Файл > Сохранить копию на сервер FTP/SFTP» (File > Save a Copy to FTP/SFTP server). Если вы выбрали соединение FTP и программа высветила вам запрос на создание исключения безопасности, то разрешите его, чтобы каждый раз не получать данное сообщение в будущем.

В следующем окне вы можете выбрать папку с дочерней темой и сохранить там файл footer.php.

Этот метод также копирует файл сначала на локальный компьютер, а потом опять на сервер в выбранное вами место.

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

Редактирование футера для изменения информации о сайте

Первый вопрос, который мне задали мои ученики, когда мы дошли до этой части, был о том, как изменить стандартный футер в теме Twenty Thirteen.

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

Перед редактированием давайте коротко взглянем на то, с чем нам предстоит иметь дело.

Файл начинается тегом:

• некоторые HTML-теги с полезными комментариями;
• закрывающий тег контейнера </div>;
• открывающий тег;
• различный PHP-код, например;
• другие закрывающие HTML-теги.

Итоговый код на странице выглядит вот так:

Вы можете заметить, что на этой странице только HTML-код. Различные шаблоны, входящие в состав темы (например, sidebar.php, footer.php и др.) или непосредственно WordPress, в конечном итоге создают единый HTML-код страницы, которая передается браузеру. Каждая страница или запись на вашем сайте, которую вы посещаете, подобным образом «собирается» из кусочков.

Если вы находитесь на главной странице, то шаблон может называться home.php или front-page.php, а если на странице блога, то страница будет иметь имя archive.php. Все шаблоны в вашей теме выполняются совместно (на сервере), когда клиент (браузер) делает запрос серверу на просмотр той или иной страницы.

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

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

Первое что мы видим, это отрывок кода, выводящий ссылку на сайт WordPress.org

<?php do_action( 'twentythirteen_credits' ); ?>
<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentythirteen' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentythirteen' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentythirteen' ), 'WordPress' ); ?></a>
Теперь, когда вы поняли, за что отвечает данная часть кода, вы можете изменить его или даже полностью удалить. Чтобы осуществить последнее, вам надо удалить все, оставив только:
<div class="site-info"></div>
<!-- .site-info -->

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

Получится что-то вроде этого: “Lovingly crafted by The Web Princess for The Site Client © 2013“

Далее, мы изменим в этом отрывке название twentythirteen на mytheme (впишите вместо этого слова свое название). В следующем коде:

<?php do_action( 'mytheme_credits' ); ?>
    <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'mytheme' ); ?>"><?php printf( __( 'Proudly powered by %s', 'mytheme' ), 'WordPress' ); ?></a>

Необходимо заменить ссылку wordpress.org на thewebprincess.com – это как раз и будет ссылка на ваш сайт. Вот как код выглядит после изменения:

<?php do_action( 'mytheme_credits' ); ?>
    <a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'mytheme' ); ?>"><?php printf( __( 'Proudly powered by %s', 'mytheme' ), 'WordPress' ); ?></a>

Теперь мы заменим текст ссылки с "Semantic Personal Publishing Platform" на "Web Development and WordPress Training" в следующей части кода:

<?php do_action( 'mytheme_credits' ); ?>
    <a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Web Development and WordPress Training', 'mytheme' ); ?>"><?php printf( __( 'Proudly powered by %s', 'mytheme' ), 'WordPress' ); ?></a>
Затем изменим текст "Proudly Powered by" на "Lovingly Crafted by":
<?php do_action( 'mytheme_credits' ); ?>
    <a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Web Development and WordPress Training', 'mytheme' ); ?>"><?php printf( __( 'Lovingly Crafted by %s', 'mytheme' ), 'WordPress' ); ?></a>

Затем изменим слово "WordPress" на фразу "The Web Princess":

<?php do_action( 'mytheme_credits' ); ?>
    <a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Web Development and WordPress Training', 'mytheme' ); ?>"><?php printf( __( 'Lovingly Crafted by %s', 'mytheme' ), 'The Web Princess' ); ?></a>

Осталось добавить в конце текущий год. И мы сделаем это с помощью PHP, так как он позволяет сделать так, чтобы всегда автоматически выводился текущий год! В итоге наш код будет выглядеть вот так:

<?php do_action( 'mytheme_credits' ); ?>
<p><a href="<?php echo esc_url( __( 'http://thewebprincess.com/', 'mytheme' ) ); ?>" title="<?php esc_attr_e( 'Web Development and WordPress Training', 'mytheme' ); ?>"><?php printf( __( 'Lovingly Crafted by %s', 'mytheme' ), 'The Web Princess' ); ?></a> for The Site Owner &copy; <?php echo date('Y'); ?>

Вот он новый футер для нашего сайта!

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

<a title="Web Development and WordPress Training" href="http://thewebprincess.com/">Lovingly Crafted by The Web Princess</a> for 
The Site Owner &copy; 2013

Перемещение основного меню навигации на позицию выше заглавного баннера

Итак, следующим нашим шагом будет перемещение основного меню навигации с текущей позиции на место выше заглавного баннера. А затем, мы создадим новую область навигации ниже баннера.

Теперь пришло время скопировать файл header.php из директории родительской темы в папку с дочерней и открыть его в текстовом редакторе.

Выберите весь код, как показано на изображении:

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

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

Сохраните файл и обновите страницу вашего сайта, чтобы увидеть изменения:

Заметьте, что баннер стал намного меньше своей прежней высоты, а разрыв между баннером и заголовком страницы больше.

Если мы исследуем эту часть в «инспекторе», то увидим, что секция заголовка имеет все ту же высоту. Как так получилось? Дело в том, что часть изображения баннера была скрыта навигационным меню, поэтому мы передвинем баннер чуть ниже, чтобы избежать этого эффекта.

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

body .site-header {
    background-position: 0px 45px;
}

Причина, по которой мы поместили селектор body рядом с .site-header в том, что в данном случае мы хотим повысить специфичность селектора body CSS. Если мы этого не сделаем, то не увидим ожидаемого результата, потому что .site-header может быть задан в других местах темы, и тогда он будет иметь более высокий приоритет (другими словами, идти в каскаде ниже нашего заданного селектора). Добавление селектора body повышает специфичность и дает больший приоритет, на что наш сайт соответствующим образом отреагирует.

Выглядит отлично!

Сохраните изменения, обновите страницу и посмотрите на ваш сайт в браузере!

Добавление описания страницы к шаблону страницы с использованием произвольных полей

Наконец, последнее, что мы проделаем в этом уроке, это внесем изменения в файл шаблона page.php, что позволит нам добавить на страницу поля с описанием, и расположить их под заголовком страницы. Мы будем это делать с помощью произвольных полей (custom fields).

Мы начнем с настройки произвольных полей.

Сначала, вам нужно изменить «Опции отображения» (Screen Options), чтобы убедиться, что у вас разрешены произвольные поля, для чего проверьте, стоит ли галочка напротив опции «Произвольные поля» Custom Fields:

Если галочка там стоит, то ниже окна редактора будет видна соответствующая панель опций. Нажмите кнопку «Ввести новое» (Enter New), чтобы создать новое произвольное поле. Затем поместите строку «page description» в поле «Имя» (Name), а после этого введите описание своей страницы в поле «Значение» (Value).

Нам нужно вставить еще кое-какой код в один шаблон. Для этого надо скопировать файл page.php из родительской директории темы в папку нашей дочерней темы, а затем открыть скопированный page.php в нашем текстовом редакторе. Мы вставим данный код в шаблон между заголовком первого уровня (<h1>) и его закрывающим тегом.

Сохраните файл с изменениями, загрузите его на сервер и посмотрите на окончательный вариант страницы:

Поздравляю! Вы постигли основы редактирования шаблонов тем!

Заключение

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