Wordpress

Создание шаблона wordpress: Customize API — Тема

02.06.2021

Содержание

Как создать тему (шаблон) WordPress с нуля

Автор Олег На чтение 21 мин. Просмотров 390 Опубликовано

Адаптивный дизайн – это отличный способ представить сайт таким образом, что он будет подстраиваться под размеры экрана любого устройства: десктопа, планшета или смартфона. В данном руководстве я расскажу как создать шаблон для WordPress с нуля на основе популярного фреймворка Bootstrap. Если вы хотите сами создать тему для WordPress, а не скачивать уже готовую, предлагаю к прочтению эту статью.

Адаптивный веб дизайн: WordPress + Bootstrap

В этом руководстве мы научимся создавать свою собственную адаптивную тему для WordPress, используя Bootstrap.

Bootstrap – это фреймворк для создания сайтов и веб приложений. Он отлично подходит в качестве стартовой точки для создания адаптивной темы под WordPress.

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

Тема, которую мы будем создавать, будет основана на примере шаблона простого коммерческого сайта («Basic marketing site»), который вы можете скачать со страницы загрузки Bootstrap.

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

  • Главная страница с изменяемым дизайном;
  • Страница «О нас»;
  • Страница «Контакты»;
  • Секция новостей с комментариями;
  • Виджитируемый сайдбар.

Подготовка к старту

Прежде чем мы начнем, есть несколько вещей, которые вам следует сделать:

  1. Установить WordPress*;
  2. Скачать и распаковать архив с Bootstrap;
  3. Установить плагин Theme Test Drive**.

* Например, прочитав руководство по установке WordPress.

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

Я настоятельно рекомендую не проводить эксперименты на действующем сайте, а процесс разработки темы перенести в локальное окружение. Как это сделать подробно описано в статье про установку локального веб сервера.

После того, как эти три пункта будут выполнены, откройте директорию с установленным Вордпрессом и перейдите в папку wp-content > themes.

Путь к папке с темой — нажмите, чтобы увеличить

В директории themes создайте новую папку с именем «wpbootstrap». Внутрь нее поместите распакованную из архива папку bootstrap.

распакованный архив внутри папки с новой темой — нажмите, чтобы увеличить

Внутри папки wpbootstrap создайте файл index.php.

файл index.php в папке с новой темой — нажмите, чтобы увеличить

Теперь мы скопируем исходный код из примера «Basic marketing site», который был на странице скачивания bootstrap и вставим его в созданный только что файл index.php. Вы можете выбрать другой пример или воспользоваться, подготовленным мной, текстовым файлом. Откройте ссылку, скопируйте содержимое и вставьте в индексный файл.

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

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

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

/*

Theme Name: WP Bootstrap

Theme URI: https://blogbit.net/

Description: Демонстрационная тема, созданная благодаря статье <a href=»https://blogbit.net/kak_sozdat_adaptivnuyu_temu_dlya_wordpress_s_pomoshhyu_bootstrap/»>Как создать адаптивную тему для WordPress с помощью Bootstrap</a>.

Author: Sergey Antonyuk

Author URI: https://blogbit.net/

Version: 1.0

Tags: responsive, white, bootstrap

License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)

License URI: https://creativecommons.org/licenses/by-sa/3.0/

Это простая тема была создана на основе примера «Basic marketing site», найденного на сайте фреймворка от команды разработки Twitter – Bootstrap. https://getbootstrap.com/2.3.2/examples/hero.html

*/

Последняя вещь, которую нужно сделать прежде чем мы начнем создавать нашу собственную адаптивную тему, – это загрузить в папку с темой ее скриншот. Это такое изображение, которое будет отображаться в разделе выбора темы в административной панели WP. Размеры этой картики: 300 x 225 пикселей, и называться она должна “screenshot.png”. Вы можете создать свой скриншот или воспользоваться моим:

Скриншот, используемый с темой WP Bootstrap

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

Структура файлов в папке с темой — нажмите, чтобы увеличить

Сейчас мы готовы войти в административную часть WP и установить нашу новую тему. Авторизуйтесь в административной части и перейдите в раздел Внешний вид > Темы. Вы должны увидеть WP Bootstrap в списке тем.

WP Bootstrap на странице выбора темы — нажмите, чтобы увеличить

Щелкните «Активировать», чтобы сделать эту тему темой по умолчанию на сайте.

ВАЖНО: Если вы сейчас создаете тему на «живом» сайте и не хотите, чтобы пользователи видели процесс разработки, удостоверьтесь, что вы установили и активировали плагин Theme Test Drive.

Когда она активируется, перейдите на главную страницу своего сайта. Вы должны увидеть что-то вроде этого:

Новая тема после активации — нажмите, чтобы увеличить

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

Превращение файлов Bootstrap в шаблон WordPress

Большинство тем WordPress включают следующие основные файлы:

  • index. php
  • style.css
  • header.php
  • footer.php
  • sidebar.php

Обычно вы ведите гораздо больше файлов, чем указано здесь, однако мы начнем именно с этих пяти основных, без которых не обходится ни одна тема ВордПресс. Создайте в той же папке с index.php пустые файлы с именами header.php, footer.php и sidebar.php.

Папка темы с основными файлами — нажмите, чтобы увеличить

Сейчас необходимо открыть файл index.php, вырезать html-код, который обычно выводится в «шапке» на каждой странице сайта и вставить в файл header.php. Затем мы вырежем и вставим в файл footer.php тот html-код, который обычно выводится в «подвале» всех страниц сайта.

Я уже подготовил эти файлы. Взгляните сюда:

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

Файл sidebar.php по-прежнему пустой.

Теперь настала пора использовать наши первые теги WordPress, которые предназначены для подключения к индексному файлу index.php «шапки» – header.php и «подвала» – footer.php.

Вот эти два тега: get_header() и get_footer(). Эти теги, на самом деле, встроенные в ВордПресс, функции, задача которых находить и подключать файлы header.php и footer.php. Первый подключается вверху страницы, второй – внизу. WordPress делает это потому, что мы назвали наши файлы header.php и footer.php. Если бы мы назвали их, например, my-header.php и my-footer.php, то это бы не сработало.

Вот как должен выглядеть наш файл index.php после этого:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<?php get_header(); ?>

 

      <!— Main hero unit for a primary marketing message or call to action —>

      <div>

        <h2>Hello, world!</h2>

        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>

        <p><a>Learn more &raquo;</a></p>

      </div>

 

      <!— Example row of columns —>

      <div>

        <div>

          <h3>Heading</h3>

          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

          <p><a href=»#»>View details &raquo;</a></p>

        </div>

        <div>

          <h3>Heading</h3>

          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

          <p><a href=»#»>View details &raquo;</a></p>

       </div>

        <div>

          <h3>Heading</h3>

          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>

          <p><a href=»#»>View details &raquo;</a></p>

        </div>

      </div>

 

<?php get_footer(); ?>

Вы можете спросить: «Зачем разрезать html-страничку таким образом?». Ответ станет очевиден после того, как мы начнем создавать дополнительные страницы. Представьте себе, что у вас накопился десяток страниц с включенными туда «шапкой» и «подвалом» как есть, без разделения на отдельные файлы. И вот вам необходимо внести правки в адрес организации в «подвале». Для этого вам бы потребовалось изменить все эти десять страниц, – согласитесь, трудоемко? А если их не десяток, а сотня или даже больше? В случае хранения каждой отдельной части шаблона в отдельном файле, вам надо будет внести изменения в одном единственном файле!

Теперь нам надо исправить все неправильные ссылки к файлам стилей CSS и скриптов JavaScript.

Давайте начнем с шаблона «шапки».

Найдите вот этот блок кода в файле header.php:

<!— Le styles —>

<link href=»../assets/css/bootstrap.css» rel=»stylesheet»>

<style type=»text/css»>

  body {

    padding-top: 60px;

    padding-bottom: 40px;

  }

</style>

<link href=»../assets/css/bootstrap-responsive.css» rel=»stylesheet»>

И поменяйте его на вот этот блок кода:

<!— Le styles —>

<link href=»<?php bloginfo(‘stylesheet_url’);?>» rel=»stylesheet»>

В основном файле стилей style. css добавьте следующие строки:

@import url(‘bootstrap/css/bootstrap.css’);

@import url(‘bootstrap/css/bootstrap-responsive.css’);

body {

     padding-top: 60px;

     padding-bottom: 40px;

}

Только что мы использовали еще один тэг WP, который присоединяет к нашей теме главный файл стилей style.css. Мы еще не раз будем применять функцию bloginfo() в этом руководстве. Затем мы использовали директиву @import, чтобы связать стили Bootstrap и наш главный CSS файл. Сейчас наш сайт должен выглядеть так:

Главная страница с включенными стилями — нажмите, чтобы увеличить

Так гораздо лучше!:)

Прежде чем мы двинемся в «подвал», есть еще один тэг, который надо добавить в header.php – функция wp_head(). Это так называемый «хук» ВордПресс, позволяющий разработчикам плагинов динамически добавлять CSS и JavaScript на ваш сайт. Если мы не включим этот тэг в наш шаблон, некоторые плагины могут не заработать. Нам также надо будет удалить из header.php некоторые html тэги. В результате наш файл header.php должен выглядеть так:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

<head>

    <meta charset=»utf-8″>

    <title>Bootstrap, from Twitter</title>

    <meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

 

    <!— Le styles —>

    <link href=»<?php bloginfo(‘stylesheet_url’);?>» rel=»stylesheet»>

 

    <!— Le HTML5 shim, for IE6-8 support of HTML5 elements —>

    <!—[if lt IE 9]>

      <script src=»https://html5shim. googlecode.com/svn/trunk/html5.js»></script>

    <![endif]—>

 

    <?php wp_enqueue_script(«jquery»); ?>

    <?php wp_head(); ?>

  </head>

  <body>

 

  <div>

    <div>

      <div>

        <a data-toggle=»collapse» data-target=».nav-collapse»>

          <span></span>

          <span></span>

          <span></span>

        </a>

        <a href=»<?php echo site_url(); ?>»><?php bloginfo(‘name’); ?></a>

        <div>

          <ul>

 

              <?php wp_list_pages(array(‘title_li’ => », ‘exclude’ => 4)); ?>

 

          </ul>

        </div><!—/.nav-collapse —>

      </div>

    </div>

  </div>

 

  <div>

Теперь давайте отредактируем шаблон «подвала». Скаченный нами пример содержит множество ссылок на файлы скриптов JavaScript, которые не требуются для нашего сайта. Наша задача их удалить. Приведите свой файл footer.php в соответствие с кодом ниже:

<hr>

 

      <footer>

        <p>© Company 2012</p>

      </footer>

 

    </div> <!— /container —>

 

    <!— Le javascript

    ================================================== —>

    <script src=»../assets/js/jquery.js»></script>

    <script src=»../assets/js/bootstrap.js»></script>

 

  </body>

</html>

Следующим шагом мы добавим тэг wp_footer(), который служит для тех же целей, что и wp_head(). Мы поместим его перед закрывающим тэгом </body>. Мы также изменим способ загрузки наших JavaScript файлов, поместив их вызов в header. php.

В результате, наш обновленный footer.php должен выглядеть так:

<hr>

 

      <footer>

        <p>© Company 2012</p>

      </footer>

 

    </div> <!— /container —>

 

    <?php wp_footer(); ?>

 

  </body>

</html>

Теперь можно вернуться и добавить загрузку JavaScript, в соответствии с рекомендациями разработчиков WordPress. Для этих целей воспользуемся специальной функцией wp_enqueue_script().

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

Поместите следующий код в свой header.php:

    <?php wp_enqueue_script(«jquery»); ?>

    <?php wp_head(); ?>

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

Создадим новый файл в папке нашей темы под названием functions.php и загрузим наши скрипты оттуда. Со стороны может показаться, что мы проделываем слишком много лишних шагов для загрузки JS. Однако, благодаря такому подходу, код вашей темы будет оставаться чистым и организованным, как бы она в дальнейшем не разрасталась в объеме.

В той же папке, где лежит файл header.php, создайте и откройте для редактирования файл functions.php. Вставьте туда следующий код:

<?php

 

function wpbootstrap_scripts_with_jquery()

{

// Register the script like this for a theme:

wp_register_script( ‘custom-script’, get_template_directory_uri() . ‘/bootstrap/js/bootstrap.js’, array( ‘jquery’ ) );

// For either a plugin or a theme, you can then enqueue the script:

wp_enqueue_script( ‘custom-script’ );

}

add_action( ‘wp_enqueue_scripts’, ‘wpbootstrap_scripts_with_jquery’ );

 

?>

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

Выпадающее меню на мобильном устройстве — нажмите, чтобы увеличить

Если выпадающее меню не работает, значит, где-то вкралась ошибка при связывании скриптов со страницей. Удостоверьтесь в том, что вы правильно выгрузили папку со скриптами в bootstrap > js.

Создание главной страницы WordPress

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

Перейдите в административную область и щелкните на пункте меню «Страницы > Добавить новую». Страницу назовите «Главная», а затем кликните на вкладке визуального редактора «Текст». Теперь вырежем весь html-код между тегами get_header() и get_footer() из файла index.php и вставим в визуальный редактор ВордПресс:

Вкладка «Текст» в визуальном редакторе WP — нажмите, чтобы увеличить

Не забудьте нажать кнопку «Опубликовать».

Теперь ваш файл index. php должен иметь вот такое содержание:

<?php get_header(); ?>

 

<?php get_footer(); ?>

Чтобы динамически подключить содержание страницы «Главная», которую мы создали в административной панели Вордпресс, в наш шаблон, мы воспользуемся, пожалуй, самой известной функцией WordPress, известной как «Loop».

Loop (в пер. с англ. «петля») вполне оправдывает свое название. Loop перебирает страницы и опубликованные посты и «тянет» в них название и содержание, а также много другой полезной информации, например, дату публикации, автора статьи и даже связанные с ней комментарии.

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

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

 

<?php endwhile; else: ?>

<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>

<?php endif; ?>

А так должен выглядеть ваш index. php после добавления туда Loop:

<?php get_header(); ?>

 

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

 

<?php endwhile; else: ?>

<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>

<?php endif; ?>

 

<?php get_footer(); ?>

Что мы сейчас сделаем, так это извлечем название (title) и содержание (content) статьи. Тэг, отвечающий за вывод тайтла, пишется так: the_title(), а за вывод содержания – the_content(). А вот так они включаются в Loop:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

 

<h2><?php the_title(); ?></h2>

<?php the_content(); ?>

 

<?php endwhile; else: ?>

<p><?php _e(‘Sorry, no posts matched your criteria. ‘); ?></p>

<?php endif; ?>

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

Настройки главной страницы — нажмите, чтобы увеличить

Итак, перейдите на вкладку Настройки > Чтение в административной части ВордПресс. В разделе «На главной странице отображать» выберите «Статическую страницу» и в выпадающем меню Главная страница — «Главная». Щелкните «Сохранить изменения» и перезагрузите главную страницу сайта. Вы должны увидеть содержание страницы «Главная», которую мы создали в админ панели ВордПресс.

WordPress позволяет нам использовать специальный файл, который называется front-page.php, исключительно для главных страниц, таких как «Главная». Сохраните файл index.php как front-page.php, удалив из него тэг the_title(), чтобы на главной не выводился заголовок «Главная».

Ваш шаблон front-page.php должен выглядеть так:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

 

<?php the_content(); ?>

 

<?php endwhile; else: ?>

<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>

<?php endif; ?>

Вы можете оставить index.php с тем содержанием, которое есть.

Чтобы показать, что все работает, давайте попробуем отредактировать содержание главной страницы в административной части. Изменения должны отобразиться на сайте. Удалите кнопки, которые отображаются под тремя блоками текста с заголовками «Heading». Измененный код должен выглядеть так:

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

Вернитесь на сайт и обновите страницу. Теперь она должна выглядеть так:

Главная страница сайта без кнопок — нажмите, чтобы увеличить

Наша главная страничка выглядит здорово! Теперь пора добавить дополнительные страницы на наш сайт.

Дополнительные страницы и навигация

Создайте страницы «О нас», «Новости» и «Контакты» в административной части WordPress. Добавьте два или три абзаца какого-нибудь текста на каждую страницу.

Навигация

Следующую вещь, которую необходимо сделать – заменить статическое меню на сайте динамическим, которое бы отображало ссылки на только что созданные страницы. Для этого найдите не маркированный список <ul> с классом «nav» и удалите все теги внутри списка. Также необходимо удалить форму входа, так как мы будем заходить на сайт через стандартную страницу входа WordPress.

Область внутри контейнера div с классом «navbar» после удаления лишних тэгов:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<div>

  <div>

    <div>

      <a data-toggle=»collapse» data-target=». nav-collapse»>

        <span></span>

        <span></span>

        <span></span>

      </a>

      <a href=»#»>Project name</a>

      <div>

        <ul>

 

        </ul>

      </div><!—/.nav-collapse —>

    </div>

  </div>

</div>

Теперь мы воспользуемся функцией wp_list_pages() для отображения списка страниц. Если не вдаваться глубоко в объяснение данной функции, то можно сказать, что она создает список страниц и ссылки на них. Добавим следующий код внутрь не маркированного списка с классом «nav»:

<ul>

 

  <?php wp_list_pages(array(‘title_li’ => »)); ?>

 

</ul>

Если вы взгляните на сайт сейчас, то увидите свои страницы в главном верхнем меню.

список страниц в меню навигации — нажмите, чтобы увеличить

Есть одна вещь, которую здесь надо исправить, – изменить порядок страниц в меню. Для этого перейдите в административной панели на вкладку «Страницы».

Меняем порядок страниц в главном меню — нажмите, чтобы увеличить

Затем, проведя курсором мыши над строкой с названием «О нас», щелкните на слове «Свойства». Измените число в поле «Порядок» на «1». Не забудьте нажать кнопку «Обновить». Проделайте ту же операцию со страницей «Новости» (число «2») и «Контакты» (число «3»). У «Главной» в поле «Порядок» должно быть указано «0». Не забудьте удалить страницу по умолчанию «Пример страницы». После всех изменений, вы должны наблюдать в верхнем меню следующий порядок страниц:

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

Теперь у нас есть работающая навигация по страницам. Тем не менее, разметка меню WordPress отличается от разметки Bootstrap, в частности, отличаются классы, которые применяются для текущей и активной страницы. Подкорректируем немного файл стилей bootstrap.css.

В папке с вашей темой перейдите в директорию bootstrap > css и откройте файл bootstrap.css. Ниже строки 4831 вы должны увидеть несколько правил для класса .active. Добавьте следующие селекторы для этого правила:

.navbar-inverse .nav .active > a,

.navbar-inverse .nav .active > a:hover,

.navbar-inverse .nav .active > a:focus,

.navbar-inverse .nav .current_page_item a,

.navbar-inverse .nav .current_page_item a:hover,

.navbar-inverse .nav .current_page_item a:focus,

.navbar-inverse .nav .current_page_parent a,

.navbar-inverse .nav .current_page_parent a:hover,

.navbar-inverse .nav .current_page_parent a:focus {

В следующей главе мы создадим шаблон для постоянных страниц и постов.

Создание шаблонов страницы, поста и списка постов

Шаблон постоянных страниц

Создадим шаблон для постоянной страницы. Для этого откройте файл index.php и пересохраните его под именем page.php.

Во-первых, надо изменить текст, который отображается, если запрашиваемой страницы не существует: «Sorry, no posts matched your criteria.» на «Sorry, this page does not exist.» То, что текст на английском не должно вас смущать, так как в локализованной версии WordPress данное сообщение все равно будет отображаться на русском языке благодаря функции _e().

Далее добавим специфичную для Bootstrap разметку, чтобы получить макет из двух колонок. Измените шаблон page.php таким образом, чтобы включить в него специальные классы «row», «span8» и «span4». Мы используем «span8» для колонки с контентом, а «span4» для колонки с сайдбаром.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<?php get_header(); ?>

 

<div>

  <div>

 

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<h2><?php the_title(); ?></h2>

   <?php the_content(); ?>

 

<?php endwhile; else: ?>

<p><?php _e(‘Sorry, this page does not exist. ‘); ?></p>

<?php endif; ?>

 

  </div>

  <div>

 

  </div>

</div>

 

<?php get_footer(); ?>

На некоторых шаблонах мы будем использовать включение сайдбара. Чтобы использовать такую возможность, применим еще один тэг WordPress get_sidebar(), который работает по принципу get_header() и get_footer(). Но сперва создадим новый файл sidebar.php и вставим в него следующий код:

Шаблон сайдбара

Мы вернемся к sidebar.php позже, сейчас же мы сделаем вот что. Вернитесь к редактированию page.php и добавьте вызов get_sidebar() внутрь элемента div с классом «span4» как в примере ниже:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<?php get_header(); ?>

 

<div>

  <div>

 

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<h2><?php the_title(); ?></h2>

   <?php the_content(); ?>

 

<?php endwhile; else: ?>

<p><?php _e(‘Sorry, this page does not exist. ‘); ?></p>

<?php endif; ?>

 

  </div>

  <div>

<?php get_sidebar(); ?>

  </div>

</div>

 

<?php get_footer(); ?>

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

Страница со списком постов

Страница новостей работает немного иначе, потому что она должна отображать не полный текст статьи, а только список постов. Есть несколько способов достичь этого. Мы воспользуемся самым простым.

Для начала сохраните файл page.php как home.php. В WordPress шаблон home.php резервируется для страницы со списком постов. В нашем случае этот шаблон мы будем использовать для страницы Новостей.

Первая вещь, которую мы сделаем – это жестко пропишем тэг h2 вверху главной области контента. Этот тэг должен быть помещен выше Loop.

В шаблоне home.php Loop выводит циклом все существующие записи в блоге. Мы будем использовать h3 под название записи, тогда как заголовок первого уровня h2 будет использован для названия страницы.

Мы также добавим новый тэг WordPress – the_permalink(). Эту функцию мы используем с тэгом ссылки <a>, при переходе по которой мы будем попадать со страницы новостей на полный текст отдельной новости. Таким образом, разметка вокруг функции the_title() должна выглядеть теперь вот так:

<h3><a href=»<?php the_permalink(); ?>»><?php the_title(); ?></a></h3>

Давайте сделаем еще несколько настроек в этом шаблоне, прежде чем двинемся дальше. Во-первых, изменим текст в случае, если нет постов для отображения. Он будет, к примеру, таким: «Sorry, there are no posts.».

Во-вторых, мы удалим отображение полного содержания поста. Мы просто сделаем список названий записей как ссылок, при переходе по которым читатели будут попадать на полный текст новости. В месте где располагался контент, мы добавим дату создания новости, используя функцию the_time(). Если у вас есть опыт программирования на PHP, то вам должно быть знакомо назначение данной функции. Вывод информации о дате создания записи может быть настроен в любом нужном вам формате. Мы отобразим дату в следующем формате:

Для отображения даты в таком формате мы воспользуемся функцией the_time() со следующими параметрами:

Наконец, мы добавим тэг <hr> под датой, чтобы отделить посты друг от друга.

Финальный шаблон home.php должен выглядеть так:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<?php get_header(); ?>

 

<div>

  <div>

    <h2>News</h2>

 

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <h3><a href=»<?php the_permalink(); ?>»><?php the_title(); ?></a></h3>

    <p><em><?php the_time(‘l, F jS, Y’); ?></em></p>

    <hr>

 

    <?php endwhile; else: ?>

      <p><?php _e(‘Sorry, there are no posts.’); ?></p>

    <?php endif; ?>

 

  </div>

  <div>

 

    <?php get_sidebar(); ?>  

 

  </div>

</div>

 

<?php get_footer(); ?>

Теперь, чтобы страница Новости отображалась должным образом, нам надо будет вернуться в административную часть, где мы настраивали отображение Главной страницы. В разделе Настройки > Чтение выберите страницу Новости из выпадающего списка «Страница записей». Нажмите кнопку «Сохранить изменения».

После сохранения изменений, вернитесь на страницу Новости. Если до этого момента вы еще не создали ни одного поста, то увидите ссылку пока только на один пост, созданный при установке WordPress.

Шаблон полного текста статьи

Шаблон single.php предназначен для отображения полного текста записи. Этот шаблон очень похож на page.php, поэтому откроем этот файл и сохраним его под именем single.php.

Первое изменение касается включения даты под названием поста. Мы используем тот же код, что и немногим ранее:

<em>Дата публикации: <?php the_time(‘j M Y’); ?></em>

Следующее, что мы сделаем – это добавим возможность оставлять под постом пользовательские комментарии. Несмотря на то, что сам процесс добавления комментариев требует написания большого количества кода, в WordPress такая возможность осуществляется простым добавлением в шаблон тэга comments_template().

Когда мы добавим его ниже тэга отображения полного текста записи, у нас появится возможность включить на страницу комментарии. Мы также добавим тэг <hr> выше комментариев, чтобы визуально разграничить их от самого текста записи. В итоге, шаблон single.php должен выглядеть примерно так:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<?php get_header(); ?>

 

<div>

  <div>

 

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<h2><?php the_title(); ?></h2>

<p><em><?php the_time(‘l, F jS, Y’); ?></em></p>

 

   <?php the_content(); ?>

 

   <hr>

<?php comments_template(); ?>

 

<?php endwhile; else: ?>

<p><?php _e(‘Sorry, this page does not exist.’); ?></p>

<?php endif; ?>

 

  </div>

  <div>

<?php get_sidebar(); ?>  

  </div>

</div>

 

<?php get_footer(); ?>

Теперь у нас есть почти полный комплект основных файлов-шаблонов. В последнем разделе мы произведем несколько мелких доработок и закончим создание адаптивной темы WordPress на основе фреймворка Bootstrap.

Последние правки

Обновим файл header.php. Во-первых, надо подкорректировать тэг <title> страниц. Тайтл – очень важная часть веб сайта, особенно, в части SEO. В идеале, мы хотели бы иметь в тайтле название страницы или поста и название сайта.

Мы можем прописать title, используя тэг WordPress wp_title(). Данная функция принимает параметры, которые позволяют настроить вывод тайтла. Воспользуемся этим:

Это позволит нам выводить в тайтле название страницы или поста, но не позволит вывести название сайта. Исправить это можно, опять воспользовавшись функцией bloginfo(), но на этот раз в качестве параметра укажем имя сайта – bloginfo('name'). Объединив эти две функции получим:

<title><?php wp_title(‘|’,1,’right’); ?> <?php bloginfo(‘name’); ?></title>

Добавьте этот код в месте вывода тэга title в файле header.php. В результате вы увидите на вкладке страницы браузера с вашим сайтом тайтл именно таким, каким мы и хотели.

Следующее изменение в header.php касается названия самого сайта, которое отображается в левом верхнем углу.

Замените код в шаблоне:

<a href=»#»>Project name</a>

На вот этот:

<a href=»<?php echo site_url(); ?>»><?php bloginfo(‘name’); ?></a>

Новый тэг site_url() создает ссылку на главную страницу сайта.

Теперь, когда мы создали ссылку на главную страницу сайта, мы можем удалить ссылку «Главная» из верхнего меню. Мы можем сделать это, добавив дополнительный параметр ‘exclude’ в функцию wp_list_pages(). Если мы взглянем на порядковый номер страницы в административной части WordPress:

Узнать id страницы можно в адресной строке — нажмите, чтобы увеличить

то увидим, что ID cтраницы «Главная» равен 168. В вашем случае он будет другой. Когда вы узнаете ID записи, обновите функцию wp_list_pages(), добавив параметр ‘exclude’:

wp_list_pages(array(‘title_li’ => », ‘exclude’ => 4))

Вместо цифры 168 вставьте число, соответствующее номеру вашей записи.

Не забудьте обновить значение данного параметра, если планируете использовать эту тему в будущем для других сайтов.

Виджетирование сайдбара

Последний важный шаг – «виджитирование» нашей темы. Данное понятие включает в себя возможность использовать виджеты WordPress.

Чтобы это стало возможно, добавим в файл functions.php еще немного кода:)

Откройте файл functions.php и добавьте туда следующий код:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<?php

 

function wpbootstrap_scripts_with_jquery()

{

// Register the script like this for a theme:

wp_register_script( ‘custom-script’, get_template_directory_uri() . ‘/bootstrap/js/bootstrap.js’, array( ‘jquery’ ) );

// For either a plugin or a theme, you can then enqueue the script:

wp_enqueue_script( ‘custom-script’ );

}

add_action( ‘wp_enqueue_scripts’, ‘wpbootstrap_scripts_with_jquery’ );

 

if ( function_exists(‘register_sidebar’) )

register_sidebar(array(

‘before_widget’ => »,

‘after_widget’ => »,

‘before_title’ => ‘<h4>’,

‘after_title’ => ‘</h4>’,

));

?>

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

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>

<?php endif; ?>

Скачать Тему WordPress

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

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

Создание темы для WordPress. Первые шаги. — WordPressify

Конечно, перед тем, как создать тему для WordPress, вы можете попробовать разобраться в уже готовых (именно так делал я). Но дело в том, что в них иногда столько всего понапихано, что это не всегда бывает легко.

Основа любой темы — файлы style.css и index.php 


Для начала создайте какую-нибудь папку в /wp-content/themes — это и будет ваша будущая тема, я например создал misha123. Каждая тема должна содержать по крайней мере 2 файла — это index.php и style.css — создаём их внутри этой папки.

Если вы забили на style.css, то в админке во Внешний вид > Темы ожидайте такой ошибки:

Если вы забили на index.php:

Тут WordPress ещё что-то болтает про дочерние темы, не обращайте внимания, вам про них ещё рано читать.

До тех пор, пока мы ещё не изучили другие файлы шаблона, index.php у нас будет отвечать за вывод любой страницы сайта, а style.css, понятное дело, содержать стили (хоть это и не обязательно), но главное, чтобы в файле style.css вы добавили метаданные и описание темы.

/*
Theme Name: Тема для Миши
Version: 105.1
Description: Вполне себе годная темка, получше некоторых
Author: Миша Рудрастых
Author URI: https://misha.blog
*/
body{color:#555;} /* это типо я показываю, что дальше идут уже ваши CSS стили */
Theme Name
Название темы, я прав?
Version
Текущая версия вашей темы
Description
Не знаю, что значит этот параметр
Author
Тут можете указать себя и тех людей, которые вам помогали
Author URI
URL на сайт автора, позволит превратить имя автора в ссылку в админке WordPress
License
Если вы создаёте под WordPress, рекомендую почитать немного про лицензию GPL
License URI
А в этом параметре указывается ссылка на страницу с лицензией
Text Domain
Что-то, связанное с переводом темы на другие языки, полагаю сейчас нам это не понадобится, но позже рекомендую почитать про правильную локализацию.
Tags
Если эта тема станет вашим будущим сайтом или сайтом вашего клиента, наиболее вероятно вам можно скипнуть этот параметр, если же вы будете в дальнейшем публиковать свою тему в официальном репозитории WordPress, тогда уделите ему особое внимание. Нет, сюда не нужно закидывать всё, что в голову придёт, со списком поддерживаемых тегов можно ознакомиться на официальном сайте.

На самом деле ни один из этих параметров не обязателен! И так всё прокатит. Например как тут:

Не исключаю, что кого-то такой вариант устроит, но только не меня, сейчас я просто скопирую предыдущий код в начало style.css темы и вот что у меня получится:

Установка изображения темы 


Согласитесь, на фоне других тем наша выглядит довольно уныло из-за отсутствия изображения! Ещё и квадратики мерцают при скролле 😭

Для того, чтобы это исправить, мы просто создаём файл screenshot.png и отправляем его прямиком в папку с темой (рекомендуемое разрешение 1200px на 900px).

Что касается расширения файла, то сгодится и jpg и gif, и jpeg, но в официальном Кодексе WP рекомендуется всё же использовать screenshot.png.

Вот, другое дело:

В этом примере я специально взял квадратную картинку в jpg-формате и она вполне годно отображается на странице со всеми темами, но если вы откроете информацию о теме в попап-окне, то будет печаль. Картинка растянется и будет некачественно.

Хоть и не обязательный, но по факту главный файл темы — functions.php 


Трудно представить тему для WordPress, в которой отсутствует файл functions.php, он используется для включения каких-либо функций темы, например регистрации сайдбаров, также он сам может содержать какой-то дополнительный функционал, ну либо файлы, подключенные в него через include() / require().

Ах да, я не упомянул? В этом уроке я предполагаю, что у вас есть базовые знания PHP, если нет, то идём читать это.

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

Главное правило по functions.php — сам по себе файл не должен ничего выводить! 💀 То есть никогда! 👿

И никогда! 👿

Это самый распространённый косяк.

Теперь напишем что-нибудь в файле index.php

<!DOCTYPE html>
<html><head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>" />
</head>
<body>
    Привет мир!
</body></html>

Как видите, я просто указал кодировку, вставил таблицу стилей, хоть и не совсем правильно при помощи get_stylesheet_uri() и написал в теле документа «Привет мир!»

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

И ещё кое-что, для того, чтобы помочь WordPress взаимодействовать с вашей темой, вы должны добавить перед закрывающимся тегом </head> функцию wp_head(), а перед закрывающимся тегом </body> функцию wp_footer(), выглядеть это будет примерно так:

<!DOCTYPE html>
<html><head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>" />
    <?php wp_head() ?>
</head>
<body>
    Привет мир!
<?php wp_footer() ?></body>
</html>

Когда я создаю какую-то тему, самая приятная часть для меня — это разделить вёрстку условно на шапку сайта, подвал и всё остальное, после этого код шапки отправляется в файл header.php и в дальнейшем подключается функцией get_header(), код подвала сайта отправляется в файл footer.php и в дальнейшем подключается функцией get_footer(). Приступим.

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

<!DOCTYPE html>
<html><head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>" />
    <?php wp_head() ?>
</head>
<body>

Чаще всего в header.php также попадает основная навигация сайта, меню.

C футером ситуация полностью аналогичная, отправляем то, что повторяется на страницах сайта и заканчиваем закрывающим </html> тегом.

<?php wp_footer() ?></body>
</html>

В итоге наш index.php стал выглядеть вот так:

<?php get_header(); // вставка header.php ?>
Привет мир!
<?php get_footer(); // footer.php ?>

Cоздание темы WordPress из HTML шаблона 


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

Что дальше?

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

Создание темы (шаблона) wordpress за минуту

На одном из англоязычных блогов недавно я нашел просто удивительное видео, которое относится к вопросу шаблонов wordpress. Точнее речь идет о создании и редактировании тем, причем очень оригинальным способом. Если я правильно понял автора, то демонстрация этой разработки происходила на WordCamp NYC, а называется она «Elastic – one minute wordpress theme». Вместо того чтобы рассказывать, думаю, лучше взглянуть на видео.

Здесь мы видим процесс создания шаблона wordpress с нуля. Сначала вы выделяете определенные области будущего макета, после чего присваиваете им функциональное назначение (шапка, сайдбар, футер). Как я понимаю, есть и другие виды настроек, но суть, думаю, ясна. Если вы хотите узнать о концепции разработки и общих идеях Elastic, то автор рекомендует взглянуть на следующее слайдшоу (показанное в процессе презентации на WordCamp NYC).

Жаль, что Elastic не войдет в новую версию wordpress 3.0, а то бы система получилась просто супер функциональной. Судя по видео, создание темы wordpress станет доступным практически каждому пользователю, кто более-менее разбирается в данной cms. Лично мне реализация очень понравилась, представляю, сколько можно будет сэкономить времени и сил в работе. И это здорово.

А вы что думаете про создание шаблона wordpress с помощью Elastic? Есть перспективы у разработки?

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Приветствую всех посетителей сайта! В выходные разбирала архивы на своем компьютере и обнаружила немало файлов, которые однозначно могут пригодиться начинающим вебмастерам. Например, программа Artisteer, может очень быстро сгенерировать уникальный шаблон для обычного HTML-сайта или популярных CMS — Joomla, WordPress,  Drupal.

Любой новичок в мире веб-дизайна, не имеющий специальных навыков, легко освоит Artisteer. Данная программа действительно понятна и проста в использовании, ее интерфйс схож на привычные всем Word и Power Point, похожая схема редактирования и управления файлом. К тому же, программа на русском языке, что значительно облегчает работу тем, кто не силен в английском.

Чтобы создать свой шаблон в Artisteer, не нужно обладать знаниями в области PHP, HTML, CSS, достаточно задать нужные параметры визуально и программа сама сгенерирует весь код. Имеется возможность настройки всех деталей шаблона, от хедера до шрифта, к тому же можно использовать любые свои текстуры, фоны, изображения и объекты.

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

При наличии знаний HTML и CSS,  можно существенным образом изменить весь дизайн сайта, при этом оставив неизменным цветовое решение и разметку. То есть взять основу — готовый программный код, сгенерированный Artisteer, и затем внести собственные изменения  в любом редакторе.

Согласитесь, у большинства сайтов структура одинакова — хедер, колонки, контент, меню, блоки, футер… Так вот Artisteer позволяет сократить время на разметку сайта, позволяя настроить нужное вам расположение элементов шаблона, их размер, оформление, эффекты в считанные минуты. В результате вы получаете «скелет» шаблона, в виде html-кода с готовыми стилями CSS и пр.  После экспорта созданного шаблона останется внести свои финальные правки и получить уникальный шаблон в максимально короткие сроки!

Те, у кого уйма свободного времени и кто привык все делать с чистого листа, далее могут не читать:)) А у кого вечная нехватка временных ресурсов и отсутствие познаний в области веб-дизайна, то  Artisteer может вам очень даже пригодиться. К тому же, проблема кроссбраузерности сайтов при использовании проги отпадает, так как программный код, генерируемый Artisteer, полностью совместим с популярными браузерами.

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

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

Создание шаблона WordPress — написание ТЗ

Здравствуйте, уважаемые посетители. Сегодня мы поговорим о шаблонах WordPress. Фактически, эта статья продолжает тему, начатую в статье «Как поставить задачу верстальщику?» и содержит рекомендации, которые помогут Вам при постановке задачи исполнителям.

Небольшое вступление по теме

При создании шаблона важно четко представлять а) какие цели преследует наш сайт; б) что должен будет делать наш пользователь на сайте; в) иметь понимание структуры и функционала сайта, желательно оформленное в виде прототипа. Многие веб-студии, фрилансеры используют для создания сайтов (в т.ч. и сайтов-магазинов) платформу WordPress. Преимущества использования очевидны: бесплатность, универсальность (благодаря множеству расширений), отсутствие потребности в найме высококвалифицированных специалистов — с работой Wordpress под силу разобраться даже Junior программисту. По сути, для создания сайта на Wordpress обычно требуется создание темы (шаблона) и доработка функционала в виде изменения существующих или создания новых плагинов (дополнений).

Шаблон Wordpress от шаблонов других CMS, по сути, отличается только структурой и использованием собственных функций. Над созданием шаблона могут трудиться четыре человека (менеджер, дизайнер, верстальщик, программист), либо же два или вовсе один. Сложного в создании самого шаблона из готового макета ничего нет, необходимо всего лишь обладать знаниями HTML / CSS / Javascript / PHP. Для тех, кого связка HTML / CSS / Javascript / PHP звучит, как непонятный набор слов, сразу скажу — существует масса шаблонов как платных, так и бесплатных, на любой вкус. Также существует масса людей, которые делают такие шаблоны под заказ.

Именно потому, что даже если Вы никогда не будете вовлечены в процесс создания шаблона, но будете вынуждены объяснять, что Вам нужно, другим людям, я и написал данную заметку. Она не претендует на универсальность, и «заточена» под WordPress только потому, что это одна из наиболее распостраненных платформ для создания сайта.

Начинаем писать ТЗ для темы WordPress

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

  1. На этапе получения готового дизайна.
  2. На этапе получения готовой верстки.
  3. На этапе, когда нет ни дизайна, ни верстки и мы ставим задачу на создание темы с ноля.

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

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

  • Что готово по самому сайту? (т.е. определяем, на каком этапе мы находимся)
  • Есть ли сформированные требования к дизайну сайта (шрифты, логотипы, цвета, наличие бренд-бука)?
  • На каких устройствах и в каких браузерах будет работать сайт? 
  • Верстка будет [tooltip title=»» content=»Резиновая верстка — это отображение сайта на всю ширину экрана и изменение ширины сайта при изменении ширины экрана, соответственно.» type=»classic» ]резиновой[/tooltip]  или [tooltip title=»» content=»Фиксированная верстка — это верстка шаблона определенного размера, как правило, 960px. Такая верстка смотрится одинаково на всех разрешениях экрана.» type=»classic» ]фиксированной[/tooltip]?
  • Есть ли представление того, какие будут страницы на сайте, их количество и отличия?
  • Есть ли на примете готовые решения, которые можно использовать под WordPress (например, слайдеры, плагины форм и т.п. Возможно, ваш сотрудник/подрядчик уже с ними работал и не составит труда их внедрить в новый шаблон)?
  • Есть ли прототип сайта, либо описание функционала страниц?
  • Требуются ли настройки шаблона (изменение цвета, шрифта и т.п. из админпанели)?
  • Будет ли структура шаблона отличаться от стандартной структуры шаблона WordPress? (этот момент полезно вспомнить, если Вы действительно знакомы со структурой шаблона WordPress)?

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

1) Основные требования (ширина, цвет, если есть бренд-бук — краткое описание со ссылкой на бренд-бук, ссылки на макеты дизайна, где будет располагаться результат верстки, ориентировочные сроки выполнения задачи)

Например:

  • цвета и шрифты, а также их использование описаны в бренд-буке, который прилагается к данному документу
  • основная логика работы темы — в приложенном прототипе (для того, чтобы открыть прототип, прочтите инструкцию)
  • ширина страниц сайта – фиксированная;
  • шаблон должен корректно отображаться в распостраненных браузерах (IE7+, Firefox 3+, 
  • Google Chrome, Safari). Для старых браузеров должна быть предусмотрена страница-заглушка с рекомендациями обновить браузер.
  • шрифты должны корректно отображаться на ЖК-мониторах во основных ОС (MS Windows, GNU/Linux, Apple OS)
  • визуальные эффекты должны быть выполнены, по возможности, с использованием CSS
  • шаблон должен называться «company», основные свойства задаются из админпанели сайта

2) Разметка шаблона (ну тут все понятно)

Например:

  • для основных элементов сайта используется блочная (div) верстка;
  • страницы должны располагаться в центре экрана;
  • верхний колонтитул (header) должен был прижат к верхнему краю окна и иметь высоту 150 px;
  • в верхнем колонтитуле должен располагаться логотип компании с ссылкой на «Главную» и строка поиска по сайту;
  • на всех страницах должно отображаться основное меню навигации;
  • на второстепенных страницах (кроме главной) должны выводиться «хлебные крошки»
  • в основной части всех страниц должен располагаться баннер «карусель» с информацией о значимых проектах, значимость определяется установкой галочки «отображать в карусели» в настройке публикации;
  • нижний колонтитул (footer) должен быть прижат к нижней части окна и иметь высоту 90 px; 

3) Описание страниц (каждая по отдельности, как главная, так и вспомогательные — описание для сингла, для страниц, для главной, для категорий)

Например:

  • В шаблоне используется три типа страниц, которые отдельно описаны в пункте 5. В таблице ниже представлен пример сравнительной таблицы.
 
Название страницы Файл шаблона Файл верстки, если есть Страница прототипа, если есть Файл с дизайном Краткое описание
Главная страница front-page.php home.html Home main_05.psd Главная страница сайта
Основной шаблон страницы page.php article.html Article article_05.psd Основной шаблон страниц сайта по умолчанию
Шаблон страницы контактов contacts.php contacts.html Contacts contact_05.psd Шаблон страницы контактов и формы заявки
Шаблон страницы клиентов clients.php clients.html Clients client_05.psd Шаблон страницы отображения клиента компании
Шаблон вывода записей single.php single.html Zapis zapis_05.psd Шаблон записи
Шаблон вывода категорий category.php category.html Category category_05.psd Шаблон вывода записей категории
Шаблон настроек темы theme-options.php options.html Opts-backend options_05.psd Шаблон страницы настроек темы
Шаблон отображения страницы 404 ошибки 404.php 404.html 404 404_05.psd Шаблон 404 страницы (Страница не найдена)
Шаблон вывода результатов поиска search.php search.html search search_05.psd Шаблон страницы результатов поиска

4) Настройки шаблона (при необходимости)

Например:

В шаблоне должна быть предусмотрена возможность смены фонового цвета / изображения сайта, а также логотипа прямо из административной панели. За вывод настроек отвечает файл theme-options.php. Доступ к настройкам темы: Консоль —> Внешний вид —> Настройки темы «company»
5) Структура шаблона и размещение стилей шаблона (обычно просто древовидная структура с названиями файлов шаблона)

Например:

Для текстового редактора CMS должны быть разработаны три основных шаблона для публикаций:

  • Базовый шаблон – page.php. Весь текст содержимого должен быть оформлен в соответствии с бренд-буком. Тег заголовка h2 должен иметь размер 1em от общего размера шрифта. Теги h3, h4, strong должны иметь размер 0,5em общего размера шрифта.
  • На основе базового шаблона создаются шаблоны для страниц «Контакты» и «Клиенты» должны отображаться изображения анонса, анонсы публикаций и ссылки «узнать больше» на полную версию статьи если таковая имеется. Полная версия статьи должна выводиться во всплывающем окне с использованием JavaScript, после перехода по ссылке «узнать больше»
  • Для вывода записей категорий создается отдельный шаблон category.php. Записи для этих страниц должны быть сложены прямоугольными плитками одинакового размера по 3 в ряд с одинаковым отступом между плиток. Каждая плитка должна быть обрамлена пунктирной линией. В плитке должно отображаться изображение анонса, анонс публикации и ссылка «узнать больше» на полную версию статьи если таковая имеется.
  • Полная версия статьи должна выводиться во всплывающем окне с использованием JavaScript, после перехода по ссылке «узнать больше»
  • Основные стили шаблона размещаются в файле style.css. Вспомогательные — в папке css в корневом каталоге шаблона company

Ниже представлена структура оговариваемого шаблона с объяснениями:

company — основная папка шаблона

-css — папка со стилями

—custom.css — папка дополнительных стилей (редактора итп)

—index.php — файл защиты от прямого доступа

-js — папка с файлами javascript

—custom.js — основной файл javascript

—index.php — файл защиты от прямого доступа

-img — папка картинок шаблона

—back.jpg

—divider.jpg

—index.php — файл защиты от прямого доступа

-archive.php — шаблон вывода архивов записей

-404.php — шаблон вывода ошибки «страница не найдена»

-category.php — шаблон категории

-comments.php — шаблон комментариев

-contacts.php — шаблон вывода страницы «Контакты»

-clients.php — шаблон вывода страницы «Клиенты»

-header.php — шаблон вывода заголовка (шапки сайта)

-footer.php — шаблон вывода подвала сайта

-front-page.php — шаблон главной страницы

-functions.php — файл расширений, настроек, модификаций темы

-index.php — файл защиты от прямого доступа

-page.php — базовый шаблон страницы

-sidebar.php — служебный шаблон вывода левой/правой колонки

-single.php — базовый шаблон записей

-search.php — шаблон отображения поисковой выдачи

-searchform.php — шаблон отображения поисковой формы

-theme-options.php — файл настроек темы

Итоги

Естественно, представленная структура — не истина в первой инстанции. Структура может упрощаться / усложняться. Подведем краткие итоги:

1) Мы обсудили некоторые ньюансы создания тем WordPress.

2) На примерах постарались создать ориентировочное ТЗ для исполнителя.

При необходимости что-то разобрать более подробно — спрашивайте в комментах.

Полезные ссылки:

Кодекс Вордпресс — http://codex.wordpress.org

Иерархия шаблонов в том же кодексе — http://codex.wordpress.org/Иерархия шаблонов

 


Похожие статьи:

Уникальная тема wordpress, создание при помощи программы Artisteer

Уникальные шаблоны для WordPress, способы создания

В Новом 2012 году я решил подарить своему блогу уникальную тему. Мой блог использует CMS WordPress. И все блогеры, знакомые с этой системой, хорошо знают, что подобрать хорошую, функциональную тему для использования  в процессе создания сайта довольно просто, достаточно только уделить этому какое-то время. Но мне захотелось создать именно уникальный шаблон для своего блога.

Верстать его с использований Фотошопа, HTML, языка PHP, CSS-стилей было бы более профессионально, но у меня не хватает пока знаний и навыка для этого. Будет время свободное, надеюсь разобраться и с этими вопросами. Тем более что стандарты HTML5 открывают новые возможности для вебмастеров. А пока решил пойти по более проторенному пути, используя для этого специализированные программы.

Программа Artisteer, создание уникальных шаблонов/тем для блогов на WordPress

После непродолжительного поиска по интернету остановился на программе Artisteer, специально заточенную для создания шаблонов для WordPress и попробовал поработать с ней. 

   

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

Должен вам сказать, что это довольно увлекательное занятие. Верстка шаблона на WordPress при помощи программы Artisteer затягивает и увлекает, как хорошая игрушка. Можно менять дизайн шаблона до бесконечности. Белый верх , темный низ, и голубенький фон хорошо получается и желтый очень неплохо. Главное вовремя остановиться на одном из вариантов. Перепробовав довольно большое количество различных сочетаний дизайна я получил шаблон, который вы наблюдаете. Оцените его, выскажите свои замечания и пожелания в комментариях.

Теперь несколько слов об отрицательных моментах. Отключилась возможность комментировать статичные страницы моего сайта, такие как «О блоге», «Об авторе»…, как и не показываются уже существующие комменты к этим страницам. И второе, если наименование какого либо блока в виджетах слишком длинное( у меня было пара таких на две строки), то они просто обрезаются и хвост не показывается.

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

Функции программы Artisteer

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


Итак основные разделы этой программы:

  • Цвета и шрифты выбираются для каждого раздела или подраздела.
  • Начинаем выбор с макета страницы, где определяемся с общим видом нашего блога, расположением меню, расположением и количеством виджетов.
  • Затем определяем фон блога, определяем основные цветовые пешения.
  • Задаем параметры листа.
  • Формируем Заголовок сайта, подбираем цвет, рисунок, фото и другие параметры.
  • Определяем вид меню сайта, шрифты, цвета.
  • Настраиваем все элементы статьи сайта, от заголовка, шрифтов, отступов и концовки страницы.
  • Формируем элементы блоков, располагаемых в виджетах.
  • Разбираемся с видом кнопок на сайте.
  • Формируем параметры подвала или футера нашего блога.

Это я кратко пробежался по разделам этой программы. Нужно отметить, что программа создает шаблоны дизайна и для других CMS, таких как Jumla, Drupal и некоторых других, есть возможность создавать странички непосредственно в HTML-коде. Подробнее с работой программы Artisteer можно ознакомиться, просмотрев видеоурок, расположенный ниже.

Хочу до Вас донести информацию о возможности работы на дому. Это можно сделать, став партнером в Содружестве Интернет Продюссеров.

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

Для подробного ознакомления перейдите по ссылке «Как стать партнером в Центре Равновесия».

Если Вас заинтересовала эта информация, пройдите по этой ссылке и ознакомьтесь более подробно с предложениями специалистов Центра Равновесия.

Спасибо за внимание, всем успехов.

 

Полезные Материалы:

Создание пользовательских шаблонов страниц в WordPress

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

Вы можете начать с копирования шаблонов страниц из популярных тем, таких как тема WordPress по умолчанию Twenty Seventeen, и настройки, но вы также можете легко добавить свои собственные стили и Javascript.

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

Что такое шаблон страницы?

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

Twenty Fourteen имеет шаблон страницы для участников.

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

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

Темы

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

Создание шаблона страницы

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

Если вы изменяете стороннюю тему, вам действительно следует использовать дочернюю тему. Если вы не знаете, как его создать, прочтите замечательную статью Рэлин Уилсон «Как создать дочернюю тему WordPress».

Файлы шаблонов страниц могут находиться в подкаталогах — это мой любимый метод. Обычно я создаю каталог templates и храню их там.

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

Наш настраиваемый шаблон, показанный в админке

. Обратите внимание, что «Hello There» — это все, что видно; с шаблонами страниц вы сами.Вы должны вызвать заголовок, нижний колонтитул и другие элементы страницы, если они вам нужны.

Давайте создадим базовый шаблон страницы, который будет сливаться с Twenty Fourteen:

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

Если в вашей теме нет файлов шаблонов, вы можете попробовать скопировать index.php и удалив цикл в качестве отправной точки.

Создание полезных шаблонов страниц

Хорошо иметь шаблон страницы, но мы действительно должны добавить в него что-нибудь полезное. С этого момента это полностью зависит от вас, если вы можете кодировать его на PHP / HTML, вы можете его использовать.

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

  • Пользовательская страница контактов с Google Maps и контактная форма
  • Страница со списком новейших сообщений из каждой категории
  • Страница архива со списком пяти новых сообщений и сообщений категорий из трех ваших основных категорий
  • Страница карты сайта со всем вашим контентом (сообщениями и страницами)
  • Страница со списком недавно загруженных изображений
  • Список сообщений, отсортированный по количеству комментариев
  • Список сообщений, показывающий сообщения, упорядоченные по времени последнего обновления
  • Список авторов и три их первых сообщения
  • Специально разработанная страница для вашего портфолио

Вот как вы можете перечислить сообщения в алфавитном порядке с помощью шаблона страницы в Twenty Fourteen:

Опять жульничество! Я вошел в индекс .php в Twenty Fourteen и скопировал весь цикл. Мне нужно было создать новый объект запроса, поэтому я создал переменную $ custom_posts и использовал ее на протяжении всего цикла.

Добавление опций

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

Один из моих любимых плагинов Advanced Custom Fields может сделать за нас тяжелую работу.

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

Сначала установите расширенные настраиваемые поля. Затем создайте шаблон страницы, используя код из нашего предыдущего примера, приведенного выше. Убедитесь, что имя шаблона — «Пользовательский список сообщений», чтобы вы могли использовать наш пример импорта ниже.

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

Я создал заказ, и заказ, установив. Это будет импортировано в ваши настройки ACF.

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

Наши новые настройки для конкретных шаблонов

Все, что вам нужно знать, это ключ заказа, установив order_by , ключ для настроек заказа — order (никаких сюрпризов).Мы можем получить значение этих полей с помощью функции get_field () , предоставляемой ACF. Все, что нам нужно сделать, это заменить выбранные пользователем значения в наш объект WP_Query из предыдущего:

Создание шаблонов страниц с помощью CustomPress

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

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

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

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

Вы можете подписаться на бесплатную 14-дневную пробную версию и загрузить CustomPress. Даже если вы отмените, CustomPress будет вашим, и вы сможете продолжать его использовать. Если вы хотите, вы можете продолжить свое членство и получать будущие обновления, экспертную поддержку премиум-класса, все другие наши более 100 плагинов и курсы WordPress в нашей Академии.удаленное управление сайтом с помощью Hub, где вы можете

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

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

Начало работы

Вот как вы можете использовать CustomPress для создания шаблона страницы. Вы можете найти полную информацию об установке и настройке на странице CustomPress во вкладке использования.

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

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

Помимо того, что вы хотите создать шаблон страницы или тип сообщения, полезно также знать:

  • Нужны ли вам пользовательские категории или теги
  • Необходимые настраиваемые поля
  • Если вы хотите, чтобы шаблон страницы был общедоступным или частным
  • Имя, которое вы хотите использовать для шаблона страницы
  • Нужны ли вам определенные возможности типа поста
  • Если у вас многосайтовая сеть, хотите ли вы, чтобы дочерние сайты создавали собственные шаблоны страниц?

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

Когда вы впервые устанавливаете CustomPress, вы можете включить его для всей сети в Multisite или для каждого сайта. Если вы решите активировать CustomPress по сети, только суперадминистратор может создавать шаблоны страниц или настраиваемые типы сообщений, но дочерние сайты могут их использовать. Если вы включите его для каждого сайта, каждый сайт, на котором активирован плагин, может создавать свои собственные типы сообщений и шаблоны для использования.

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

Настройки шаблона страницы

Перейдите к CustomPress> Типы содержимого и нажмите кнопку Добавить тип сообщения на вкладке по умолчанию Типы сообщений .

Нажмите кнопку Добавить тип сообщения , чтобы начать.

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

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

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

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

По умолчанию Capability Type установлен на post , что означает, что вы будете создавать собственный шаблон сообщения. Если вы хотите это сделать, это прекрасно, но если вы предпочитаете создать шаблон страницы, это необходимо изменить.

В разделе Capability Type установите флажок edit и введите page в поле над ним, заменив post .

Отредактируйте Capability Type на страницу , чтобы добавить новый шаблон страницы.

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

Вы также можете настроить имена для ссылок, которые перечислены на вкладке, например, для ссылок New Page и View Pages .

Введите понятные имена для шаблона страницы и ссылок на него.

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

Добавление настраиваемых полей

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

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

Введите параметры для вашего настраиваемого поля, например его имя.

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

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

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

Выберите тип поля, которое вы хотите создать.

Вы можете выбрать множество других вариантов, и вот полный их список:

  • Текстовое поле
  • Многострочное текстовое поле
  • Радиокнопки
  • Флажки
  • Выпадающий ящик
  • Коробка с множественным выбором
  • Выбор даты
  • Загрузить

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

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

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

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

Новое настраиваемое поле появится в редакторе для созданного шаблона страницы.

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

Встраивание настраиваемого поля

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

Вы можете найти нужный код, перейдя на CustomPress> Content Types> Custom Fields tab и наведя курсор на заголовок настраиваемого поля. Щелкните ссылку Встроить код .

Вы можете найти код для встраивания вашего настраиваемого поля в настройках.

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

Код PHP можно использовать в шаблоне страницы, созданном CustomPress.Вы должны найти этот файл по адресу /wp-content/themes/your-theme/single-{post_name}.php . Вместо {post_name} вы должны увидеть фактическое системное имя, которое вы выбрали для своего шаблона страницы. В моем случае это было продуктов , поэтому мое имя файла будет single-products.php .

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

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

Настройка полей с помощью CSS

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

Чтобы настроить поля с помощью CSS, необходимо использовать сгенерированный код внедрения PHP. Затем оберните код в пользовательские теги

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

Получение помощи

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

Вы также можете проверить страницу руководства Good Support Ticket, чтобы узнать, что включить в ваш запрос поддержки, чтобы мы могли помочь вам максимально быстро.

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

Подведение итогов

Должно быть довольно очевидно, что добавляя параметры, вы можете создать совершенно новый опыт для администраторов и пользователей веб-сайтов. Эта функциональность в сочетании с настраиваемым CSS и Javascript может привести к поразительной и мощной работе.

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

Обязательно используйте эти знания с умом и создайте что-то действительно полезное для своих клиентов и для себя.

Источник изображения: Чертежи Кэмерона Дегелиа.