В этой статье я расскажу вам о том, как сделать шаблон для WordPress без знания программирования. На создание своей темы у вас уйдёт несколько минут. Работать мы будем с помощью одного бесплатного и простого сервиса.
Как сделать шаблон для WordPress самому
Перед тем, как сделать шаблон для WordPress через этот инструмент, вам следует ознакомиться с тем, за что отвечает каждая из опций. Вот их функции:
- Site name. В этом разделе можно выбрать цвет заголовка сайта, задать сам заголовок, а также указать URL к логотипу. Логотип можно оставить пустым.
- Body Size. Выбираем размер сайта в ширину. Для корректного отображения лучше оставить по умолчанию – 100%.
- Sidebar Location. В этой опции можно выбрать размер и расположение боковой колонки. Есть три варианта размера для левого и правого сайдбара, а также возможность сделать тему без боковых колонок.
- Third Column. Эта опция подключает третью колонку. Есть разные варианты.
- Menu Layout. Здесь выбирается макет меню – есть 4 разных варианта.
- Scheme Overall. Настраивается цветовая схема – фоны разных элементов, границы.
- Text Scheme. Схема оформления текста: настраиваются цвета, начертания и шрифты всех частей сайта – заголовков, меню, основного текста и других.
- Tag Cloud. Можно включить и выключить облако тегов в сайдбаре.
- Archives & Search. Настраивается отображение архивов и поиска – показывать полные версии теста или только анонсы.
- Выбираем копирайт.
Итак, теперь вы знаете, как сделать шаблон для WordPress. Осталось его получить. Для этого нажимаем внизу кнопку «Save», а затем там, где был предпросмотр, жмём на ссылку «Files packed: download theme ZIP file», чтобы скачать архив темы себе на компьютер. После этого можно установить её на свой сайт.
Этот туториал покажет, как создать новый шаблон страницы для шаблонов WordPress Cherry Framework .
Войдите в админ панель WordPress.
Откройте меню Страницы -> Добавить новую (Pages -> Add New) и создайте новую страницу с новым шаблоном страницы.
Введите заголовок страницы и сохраните изменения. В правой колонке в панели вы можете выбрать один из используемых в вашей теме шаблонов страницы. Вам необходимо добавить новый шаблон станицы в этот список. Все эти шаблоны находятся в папке на вашем сервере. Но вам необходимо добавить новый шаблон страницы в папку wp-content/themes/theme##### .
Создайте новый.php файл в любом редакторе, например, Dreamweaver или Notepad++, и назовите его, например, new.php . Добавьте в этот файл следующий код:
Сохраните файл и загрузите его в папку wp-content/themes/theme##### на ваш сервер.
Теперь вернитесь к странице, которую вы создали в админ панели WordPress. В панели Атрибуты страницы (Page Attributes) вы можете выбрать новый шаблон страницы под названием “Пользовательский” (“Custom”).
Cнова откройте файл new.php file и начните добавлять свой контент. Файл может содержать все, что вы захотите, включая неизменяемый контент или элементы макета страницы, которые будyт выводить ее контент.
Вы можете использовать элементы кода других шаблонов страницы из папки wp-content/themes/CherryFramework , чтобы создать специфическую страницу.
Давайте сначала добавим хедер и футер в новый шаблон страницы:
Если вы сохраните изменения, то сможете увидеть их на странице:
Теперь необходимо выбрать вид контента, который вы хотите использовать на этой странице. Допустим, у вас нет отдельного шаблона страницы для пользовательских постов “Наша команда” (“Our Team”). И вам нравится дизайн шаблона страницы Отзывов (Testimonials) и вы бы хотели использовать этот дизайн для постов “Наша команда” (“Our Team”). Для этого в меню Дизайн -> Редактор (Appearance -> Editor ) вы легко найдете файл, который содержит код шаблона страницы Отзывов (Testimonials). Его название page-testi.php .
Откройте этот файл для редактирования. Скопируйте только код контента, так как вы уже добавили хедер и футер (ниже приведен пример данного кода, ваш код может выглядеть иначе):
Вставьте скопированный код в файл new.php. Замените Template Name: Custom на Template Name: Team
И замените page-testi.php на new.php в этом коде.
Данный код также содержит ссылку на файл loop/loop-testi.php . Это еще один файл, который вам необходимо скопировать и редактировать. Скопируйте файл loop-testi.php из папки wp-content/themes/CherryFramework/loop и вставьте его в папку wp-content/themes/theme#####/loop (если в папке вашей темы отсутствует папка loop , вам следует создать ее). Переименуйте этот файл, например, на loop-new.php и откройте его для редактирования. Замените слово “testi” на слово “team” во всех строчках файла и сохраните изменения. (Для замены слов вы можете использовать комбинацию клавиш Control (Command) + F).
Когда файл loop-new.php создан и отредактирован, снова откройте файл new.php и замените loop/loop-testi.php на loop/loop-new.php в его коде. В результате ваш код будет выглядеть следующим образом:
Сохраните изменения и проверьте вашу новую страницу. Теперь она должна содержать пользовательские посты “Наша команда” (“Our Team”) с дизайном страницы Отзывов (Testimonials).
В этой статье мы узнаем, как создать wordpress тему. Для начала мы создадим HTML + CSS шаблон, который поместим в структуру wordpress темы. После того, как вы дочитаете эту статью, вы сможете создать собственный шаблон для wordpress, а точнее вы его создадите по ходу чтения и выполнения практических заданий. Вы будете знать как устроена тема и сможете самостоятельно реализовать ядро wordpress темы из других HTML/CSS шаблонов. Начнем?
Вступление – структура wordpress темы
Структура wordpress темы, предельно проста. В теме мы имеем файл index. php, он отвечает за сборку кусков шаблона. К этому файлу подключены другие: header. php, footer. php . Эти файлы (куски шаблона) используются на любой странице сайта. Мы знаем, что не все страницы строятся по единому шаблону, поэтому wordpress тема имеет другие файлы, такие как archives. php или single. php . Также можно создать свой тип страниц, если вы хотите, чтобы он категорически отличался от других на сайте. Это очень удобно.
Если вы внимательно рассмотрите структуру темы, и прочитаете содержимое файлов, то интуитивно поймете что к чему. Но все же имеются некоторые моменты, которые мы рассмотрим. Вы всегда сможете вернуться к этой странице и прочитать, как все делается.
А теперь рассмотрим создание шаблона поэтапно:
Шаг 1 – style.css
CSS файл, это файл параметров и дизайнерских решений для HTML элементов шаблона. Вы должны переименовать главный css файл (если он у вас не один) на style. css . Далее вам необходимо добавить в начале этого файла следующую закомментированную информацию:
/* Theme Name: Typography Paramount Theme URI: http://сайт/ Description: An image-less template focusing on Typography..0 . General comments/License Statement if any. . */
Этот код будет показывать информацию о теме для администраторов. Убедитесь что он в начале файла, и нету никаких пробельных символов перед ним!
Далее я создал еще один файл, под именем 1. css , и поместил его в папку typography-paramount , которую создал в папке wordpress темы. Нужно четко соблюдать эту структуру, чтобы wordpress смог видеть этот файл.
Шаг 2 – header и footer
На этом этапе мы создадим два файла: header. php и footer. php , о которых упоминалось раньше. Хотя они не основные и включены в тему опционально, они используются в большинстве шаблонов, поэтому мы их создадим.
Header.php
Начнем с этого файла. Создайте файл и присвойте ему имя header. php , после чего вставьте в него поданный код и сохраните. Этот файл будет отображаться на всех страницах нашего шаблона.
An imageless template focusing on Typography.
Typography Paramount
До сих пор, не было ничего особенного в отличии от простой html/css темы. Но теперь мы заменим некоторые элементы на wordpress теги.
>
/">
Это только некоторые известные мне теги. Намного больше вы найдете на официальном сайте: codex.wordpress.org .
language_attributes() – Выводит тип языка для тега .
bloginfo() – Используется для вывода информации о сайте, все параметры можно найти в кодексе вордпресса.
wp_title() – Возвращает title страницы.
wp_head() – подключает javascript и другие необходимые элементы.
get_option() – получает необходимые опции для работы с базой данных.
Footer.php
Теперь создадим так званный «подвал сайта». Создайте файл footer. php и поместите в него следующий код. Этот футер, будет отображать год, название сайта, и ссылки на rss.
php the_ time(" Y"); ?> - отображает текущий год.
- название блога.
- добавление ссылки на rssленту блога.
wp_footer() – это необходимо для самого ядра wordpress, который добавляет туда нужные ему элементы.
Шаг 3 – основной файл wordpress шаблона
Пришло время создать основной файл wordpress шаблона, который будет подключать верхушку и низ сайта. Создайте файл index. php . Это один из двух обязательных файлов wordpress темы (другой style.css). Вставьте ново созданный файл следующий код:
Этот код, помогает wordpress получить информацию куда подключать header. php и footer. php . Давайте добавим еще несколько строк между этими тегами:
">
at | |
Woops...
Sorry, no posts we"re found.
Этот фрагмент кода получает информацию об имеющихся постах в блоге и если они есть, показывает их. Если они не обнаружены, то отображается часть кода после , которая дает нам знать, что блог еще пустой.
Также добавлен тег , который выводит навигационные ссылки, чтобы пользователи могли читать ранее добавленные посты.
Пример работы wordpress темы
Теперь у нас есть подобие темы, давайте посмотрим пример работы созданной wordpress темы.
Мы имеем четыре файла в нашей теме, для начала это вполне достаточно. В следующей статье добавим файл single. php , которые будет показываться при выводе конкретного поста. Этот файл будет включать в себя , в отличии от файла index. php.
Если у вас еще остались вопросы или недопонимания по поводу создание wordpress шаблона (темы), выразите свои проблемы в комментариях ниже!Если вы часто работаете в MS Word, сохранение документа в качестве шаблона наверняка вас заинтересует. Так, наличие шаблонного файла, с установленным вами форматированием, полями и прочими параметрами, может во многом упростить и ускорить рабочий процесс.
Шаблон, создаваемый в ворде, сохраняется в форматах DOT, DOTX или DOTM. Последний разрешает работу с макросами.
Шаблон — это особый тип документа, при его открытии и последующем изменении создается копия файла. Исходный (шаблонный) документ при этом остается неизменным, как и его местоположение на диске.
В качестве примера того, каким может быть шаблон документа и зачем вообще он нужен, можно привести бизнес-план. Документы этого типа довольно часто создаются в Word, следовательно, используют их тоже довольно часто.
Так, вместо того, чтобы каждый раз заново создавать структуру документа, выбирать подходящие шрифты, стили оформления, устанавливать размеры полей, можно просто использовать шаблон со стандартным макетом. Согласитесь, такой подход к работе куда более рационален.
Документ, сохраненный в качестве шаблона, можно открыть и заполнить необходимыми данными, текстом. При этом, сохраняя его в стандартных для Word форматах DOC и DOCX, исходный документ (созданный шаблон), будет оставаться неизменным, как уже было сказано выше.
Большинство шаблонов, которые могут вам понадобиться для работы с документами в Ворде, можно найти на официальном сайте (). Кроме того, в программе можно создавать собственные шаблоны, а также изменять уже существующие.
Примечание: Часть шаблонов уже встроена в программу, но часть из них, хоть и отображается в списке, на самом деле находится на сайте Office.com. После того, как вы нажмете на такой шаблон, он будет мгновенно скачан с сайта и доступен для работы.
Создание собственного шаблона
Проще всего будет начать создание шаблона с пустого документа, для открытия которого достаточно просто запустить Word.
Если вы используете одну из последних версий MS Word, при открытии программы вас будет встречать стартовая страница, на которой уже можно будет выбрать один из доступных шаблонов. Особенно радует то, что все они удобно рассортированы по тематическим категориям.
И все же, если вы сами хотите создать шаблон, выберите “Новый документ” . Будет открыт стандартный документ с установленными в нем параметрами по умолчанию. Эти параметры могут быть, как программными (заданными разработчиками), так и созданными вами (если ранее вы сохраняли те или иные значения в качестве используемых по умолчанию).
Используя наши уроки, внесите необходимые изменения в документ, который в дальнейшем будет использоваться в качестве шаблона.
Помимо выполнения вышеперечисленных действий в качестве параметров по умолчанию для документа, который будет использоваться как шаблон, можно также добавить подложку, водяные знаки или любые графические объекты. Все, что вы измените, добавите и сохраните в дальнейшем будет присутствовать в каждом документе, созданном на основе вашего шаблона.
Уроки по работе с Ворд:
После того, как вы внесете необходимые изменения, зададите параметры по умолчанию в будущий шаблон, его необходимо сохранить.
1. Нажмите кнопку “Файл” (или “MS Office” , если используете старую версию Word).
3. В выпадающем меню “Тип файла” выберите подходящий тип шаблона:
- Шаблон Word (*.dotx): обычный шаблон, совместимый со всеми версиями Ворда старше 2003 года;
- Шаблон Word с поддержкой макросов (*.dotm): как понятно из названия, данный тип шаблонов поддерживает работу с макросами;
- Шаблон Word 97 — 2003 (*.dot): совместим со старыми версиями Ворд 1997 — 2003.
4. Задайте имя файла, укажите путь для его сохранения и нажмите “Сохранить” .
5. Созданный и настроенный вами файл будет сохранен в качестве шаблона в заданном вами формате. Теперь его можно закрыть.
Создание шаблона на основе существующего документа или стандартного шаблона
1. Откройте пустой документ MS Word, перейдите во вкладку “Файл” и выберите пункт “Создать” .
Примечание: В последних версиях Ворда при открытии пустого документа пользователю сразу предлагается перечень шаблонных макетов, на основе которых можно создать будущий документ. Если вы хотите получить доступ ко всем шаблонам, при открытии выберите “Новый документ” , а затем уже выполните действия, описанные в пункте 1.
2. Выберите подходящий шаблон в разделе “Доступные шаблоны” .
Примечание: В последних версиях Word ничего выбирать не нужно, список доступных шаблонов появляется сразу после нажатия на кнопку “Создать” , непосредственно над шаблонами находится перечень доступных категорий.
3. Внесите в документ необходимые изменения, воспользовавшись нашими советами и инструкциями, представленными в предыдущем разделе статьи (Создание собственного шаблона).
Примечание: Для разных шаблонов стили оформления текста, которые доступны по умолчанию и представлены во вкладке “Главная” в группе “Стили” , могут быть разными и заметно отличаться от тех, что вы привыкли видеть в стандартном документе.
- Совет:
Воспользуйтесь доступными стилями для того, чтобы сделать свой будущий шаблон действительно уникальным, не похожим на остальные документы. Конечно, делайте это лишь в том случае, если вас не ограничивают требования к оформлению документа.
4. После того, как вы внесете необходимые изменения в документ, выполните все те настройки, которые посчитаете нужными, сохраните файл. Для этого нажмите на вкладку “Файл” и выберите “Сохранить как” .
5. В разделе “Тип файла” выберите подходящий тип шаблона.
6. Задайте имя для шаблона, укажите через “Проводник” (“Обзор” ) путь для его сохранения, нажмите кнопку “Сохранить” .
7. Шаблон, созданный вами на основе существующего, будет сохранен вместе со всеми внесенными вами изменениями. Теперь этот файл можно закрыть.
Добавление стандартных блоков к шаблону
Стандартными блоками называют многократно используемые элементы, содержащиеся в документе, а также те компоненты документа, которые хранятся в коллекции и доступны для использования в любое время. Хранить стандартные блоки и распространять их можно с помощью шаблонов.
Так, используя стандартные блоки, вы можете создать шаблон отчета, в котором будут содержаться сопроводительные письма двух и более типов. При этом, создавая новый отчет на основе данного шаблона, другие пользователи смогут выбрать любой из доступных типов.
1. Создайте, сохраните и закройте шаблон, созданный вами с учетом всех требований. Именно в этот файл будут добавляться стандартные блоки, которые в дальнейшем будут доступны другим пользователям созданного вами шаблона.
2. Откройте шаблонный документ, к которому необходимо добавить стандартные блоки.
3. Создайте необходимые стандартные блоки, которые в дальнейшем будут доступны для других пользователей.
Примечание: При введении сведений в диалоговое окно “Создание нового стандартного блока” введите в строке “Сохранить в” имя шаблона, к которому их необходимо добавить (это тот файл, который вы создали, сохранили и закрыли согласно первому пункту данного раздела статьи).
Теперь созданный вами шаблон, содержащий стандартные блоки, может быть предоставлен другим пользователям. Сами же блоки, сохраненные вместе с ним, будут доступны в заданных коллекциях.
Добавление элементов управления содержимым к шаблону
В некоторых ситуациях требуется придать шаблону вместе со всем его содержимым некоторую гибкость. Например, шаблон может содержать раскрывающийся список, созданный автором. По тем или иным причинам этот список может не устроить другого пользователя, которому доведется с ним работать.
Если в таком шаблоне будут присутствовать элементы управления содержимым, второй пользователь сможет подкорректировать список под себя, оставив его неизменным в самом шаблоне. Чтобы добавить в шаблон элементы управления содержимым, необходимо включить вкладку “Разработчик” в MS Word.
1. Откройте меню “Файл” (или “MS Office” в более ранних версиях программы).
2. Откройте раздел “Параметры” и выберите там пункт “Настройка ленты” .
3. В разделе “Основные вкладки” установите галочку напротив пункта “Разработчик” . Для закрытия окна нажмите “ОК” .
4. Вкладка “Разработчик” появится на панели управления Ворд.
Добавление элементов управления содержанием
1. Во вкладке “Разработчик” нажмите на кнопку “Режим конструктора” , расположенную в группе “Элементы управления ”.
Вставьте в документ необходимые элементы управления, выбрав их из представленных в одноименной группе:
- Форматированный текст;
- Обычный текст;
- Рисунок;
- Коллекция стандартных блоков;
- Поле со списком;
- Раскрывающийся список;
- Выбор даты;
- Флажок;
- Повторяющийся раздел.
Добавление пояснительного текста к шаблону
Сделать шаблон более удобным в использовании можно с помощью пояснительного текста, добавленного в документ. Если это необходимо, стандартный пояснительный текст всегда можно изменить в элементе управления содержимым. Для настройки пояснительного текста по умолчанию для пользователей, которые будут использовать шаблон, необходимо выполнить следующие действия.
1. Включите “Режим конструктора” (вкладка “Разработчик” , группа “Элементы управления” ).
2. Кликните по тому элементу управления содержимым, в котором необходимо добавить или изменить пояснительный текст.
Примечание: Пояснительный текст по умолчанию находится в небольших блоках. Если “Режим конструктора” отключен, эти блоки не отображаются.
3. Измените, отформатируйте замещающий текст.
4. Отключите “Режим конструктора” повторным нажатием на эту кнопку на панели управления.
5. Пояснительный текст будет сохранен для текущего шаблона.
На этом мы закончим, из этой статьи вы узнали о том, что представляют собой шаблоны в Microsoft Word, как их создавать и изменять, а также обо всем том, что с ними можно делать. Это действительно полезная функция программы, во многом упрощающая работу с ней, особенно, если над документами работает не один, а сразу несколько пользователей, не говоря уже о крупных компаниях.
Сейчас объясню, как сделать из простого HTML-шаблона тему WordPress на примере дизайна из той статьи.
Адаптировать дизайн под WordPress может понадобиться по многим причинам, например, вы переносите на CMS свой некогда статичный сайт, или вам понравился дизайн, которого в коллекции WordPress ещё нет, или вы просто хотите разобраться, как устроены темы этой CMS изнутри.
Итак, приступим.
Распределяем код по файлам
1. Скачайте шаблон и распакуйте его в папку с темами WordPress (адрес вида адрес_блога_wordpress/wp-content/themes/ ). Если хотите, переименуйте папку с темой на свой вкус. Например, у меня шаблон располагается по адресу адрес_блога_wordpress/wp-content/themes/MyTheme/ .
2. Переименуйте файл styles.css в style.css .
3. Откройте style.css в редакторе кода (таком, как Notepad++) и в самое его начало вставьте следующие строки:
/* Theme Name: MyTheme Theme URI: http://test1.ru Author: NoName Author URI: http://test1.ru Description: Example of test Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */
Как вы могли догадаться, это служебная информация о теме оформления: название, автор, описание, лицензия, версия и т. д. Правые части строк вы можете заменить на собственные, то есть задать свои авторство, версию, описание и прочие данные.
4. Создайте файлы header.php , index.php , sidebar.php , footer.php и распределите по ним код из index.html .
4.1. В header.php скопируйте код по строчку , так как этот файл отвечает за верх сайта. styles.css замените в коде на style.css - новое корректное имя файла.
4.2. В index.php вставьте код основного блока (со строки по строку ).
4.3. В sidebar.php скопируйте код бокового меню (с по ).
4.4. В footer.php вставьте оставшиеся строки (с до конца документа index.html ).
5. Удалите index.html .
6. Перейдите в админ-панель и убедитесь, что шаблон MyTheme появился в разделе Внешний вид -> Темы . Вы даже можете попробовать его просмотреть или активировать, но ничего хорошего из этого пока не получится, ведь шаблон с WordPress мы ещё никак не интегрировали.
Адаптируем header
Теперь мы начнём из статичного шаблона делать динамическую тему, в которую будут подгружаться данные и настройки WordPress.
В шаблоне будут встречаться PHP-вставки. Начинается такой код с . Между ними расположен PHP-код, чаще всего вызывающий функции CMS
1. Откройте файл header.php и замените содержащийся в нём код до блока
на следующий:
>
"> "> " type="text/css" media="screen" />Мы сделали динамическим блок
Код вызывает функцию, возвращающую языковые атрибуты в контейнер.
">
Вместо того, чтобы прописывать кодировку константой, мы вызвали функцию, которая берёт значение из настроек CMS и автоматически подставляет его в код, то есть для смены кодировки уже не придётся править файл темы.
Важная функция, обеспечивающая работу на странице стилей, плагинов и скриптов.
2. Перейдите к редактированию файла index.php. В самом его начале пропишите
,
Строчки вызывают файлы шапки, боковой панели и низа сайта.
Теперь вы можете просмотреть или даже активировать MyTheme. В результате браузер отобразит уже знакомый шаблон со статическим меню и одной-единственной страницей. Чтобы меню стало динамическим и настраиваемым, а вместо одной страницы отображались все помещённые на сайт материалы, нужно преобразовывать шаблон дальше.
Делаем динамическим верхнее меню
Пока мы имеем полностью статическую тему оформления, в том числе и с неизменным горизонтальным верхним меню. Пока его нельзя настроить из админ-панели, и если оставить код в нынешнем виде, то для вставки/удаления/переноса пунктов придётся каждый раз редактировать файл header.php , что крайне неудобно.
Чтобы не мудрствовать лукаво и не погружаться в пучину увлекательного мира программирования, зададим динамическому меню статичное название. Вместо таблицы горизонтального меню вставьте код
так, чтобы получилось следующее:
Для того, чтобы меню стало отображаться, в панели управления сайтом откройте Внешний вид -> Настроить -> Меню и либо переименуйте уже созданное меню в menu, либо создайте меню и настройте его на своё усмотрение, но обязательно присвойте ему имя menu.
Суть действий в том, что файл header.php функцией wp_nav_menu("menu=menu"); открывает меню под названием menu, которое, чтобы отобразиться, должно быть правильно названо и настроено в панели администрирования WordPress. Название menu вы можете поменять на любое другое, главное, чтобы имя совпадало и в настройках сайта, и в коде header.php .
Навигация явно куда-то съезжает, хоть и делает это красивой лесенкой. Так происходит потому, что меню нашего шаблона было неосмотрительно реализовано внутри таблицы, а надо было оформлять его списком. Частично исправить ситуацию можно, добавив в файл style.css следующий код:
#menu ul { margin: 0; /* Обнуляем значение отступов */ padding: 4px; /* Значение полей */ font-size: 18px; } #menu ul li { display: inline; /* Отображать как строчный элемент */ margin-right: 5px; /* Отступ слева */ padding: 3px; /* Поля вокруг текста */ }
Так как он прокомментирован, дополнительные объяснения вряд ли нужны. Остаётся обновить страницу и посмотреть, что список наконец-то стал горизонтальным.
Меню, конечно, можно сделать ровней и красивее, но к адаптации шаблона отношения это действо не имеет, зато крепко связано с CSS, который вы можете подробно изучить.
Завершаем «шапку»
Единственные элементы файла header.php , оставшиеся статическими - имя и описание сайта. Чтобы они брались из настроек, задаваемых в админ-панели, замените отвечающий за вывод текста в шапке код на следующие строки:
Обновите страницу - результат не заставил себя долго ждать.
Работа с файлом header.php на этом завершена, в итоге он имеет следующий код:
>
"> "> " type="text/css" media="screen" />Выводим посты
Переходим к части, содержащей основной контент страницы - редактироваться будет файл index.php .
Удалите содержимое блока right и вместо него вставьте код динамического отображения постов. Либо же удалите из файла весь код и вместо него вставьте следующее:
">
/ /А здесь нет ничего:(404
Начало цикла, благодаря которому страница будет выводить посты, пока они не закончатся.
">
Отображает заголовок поста.
/ /
Дата в формате день, месяц (сокращённо), год. Теги, комментарии.
Вывод поста.
Конец цикла при условии, что записи были.
Если же материалов нет, вывести об этом соответствующую надпись и покинуть цикл.
Вывод постраничной навигации при условии, что на одной они не помещаются.
Простой с виду код глобально изменил страницу - блог стал по-настоящему динамическим. Каждый пост можно посмотреть, ссылки работают.
Дальнейшее оформление и размещение элементов зависит только от вашей фантазии и навыков вёрстки - с отображением данных можно делать всё, что угодно, но работа над шаблоном ещё не завершена.
Добавляем виджеты
Слева от основного контента в шаблоне есть панель, на ней - блок Информация (своего рода виджет) и боковое меню. Информационный блок не должен быть статичен, а так как он очень напоминает виджет, предлагаю виджетом его и сделать. Для этого необходимо:
- зарегистрировать блок виджетов;
- вывести его в нужном месте.
Теперь подробнее.
1. В каталоге темы создайте файл functions.php. В нём хранятся функции, обеспечивающие работу шаблона. Также он может содержать и другие пользовательские процедуры.
2. Внесите в следующий код:
"MySidebar", "before_widget" => "", "after_widget" => "", "before_title" => "
", "after_title" => "
",)); ?>Этот код регистрирует блок виджетов. Вместо MySidebar вы можете вписать любое другое название. Примерно такой же функцией в этом файле можно регистрировать и меню, но я решил обойтись малой кровью и этого не делать, чтобы соприкосновение с PHP сделать минимальным, а заодно и показать два разных подхода к решению одной задачи.
3. В файле sidebar.php сотрите строки:
Информация
Далее...
и вместо них запишите:
Блок Информация ожидаемо исчез, сбоку осталось только пока ещё статическое меню.
4. Зато перемены к лучшему произошли в админ-панели - раздел Внешний вид обзавёлся подпунктами Виджеты и Меню . Перейдите в первый. Откройте его и посмотрите: внутри появился зарегистрированный в файле functions.php блок (у меня это MySidebar).
5. Чтобы воссоздать информационный блок, перетащите на сайдбар виджет Текст , в поле Заголовок введите Информация , в поле Текст - код
Мы предлагаем Вам праздничные скидки. Далее...
6. Обновите страницу блога - блок удалось воссоздать практически один в один (мелкие нюансы меняются в файле style.css и заострять на них внимание я не буду).
Адаптируем меню
Вторая часть боковой панели - вертикальное меню. Его тоже нужно переделать из статического в динамическое, чтобы редактировать затем прямо из админки.
1. Удалите огромный вложенный список меню в файле sidebar.php и вместо него введите код:
2. В панели управления WordPress откройте Внешний вид -> Настроить -> Меню , нажмите кнопку Добавить меню, назовите его так, чтобы имя в админ-панели совпадало с именем в коде страницы sidebar.php (у меня это left_menu ) и добавьте все необходимые пункты.
3. Сохраните изменения, обновите страницу и убедитесь, что динамическое меню левой части сайта работает и отображается правильно.
Код страницы sidebar.php по сравнению с исходным сильно уменьшился и в итоге стал таким:
Меню
Фактически статичной осталась только надпись Меню . И то потому, что меняться вряд ли будет, хотя и её легко можно «оживить», например, реализовав этот блок в виде ещё одной области виджетов и добавив на него блок Произвольное меню, но это, если внимательно читали статью, вы можете теперь легко сделать самостоятельно.
