{"draftJsState":{"blocks":[{"data":{"image":{"id":"5ee895abb0200314ab98582d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"atomic:image","key":"eqb9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давно хотел написать подробное руководство о том, как создать тему на WordPress с нуля. Вам это пригодится: если вы хотите научиться разрабатывать сайты на WP, а не просто устанавливать шаблонные решения; вы хотите сделать уникальный дизайн для своего сайта или «натянуть» HTML шаблон; ну или в конце концов работать в этом направлении получая свои кровные.","type":"unstyled","key":"e5io6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В свое время мне очень помогла одна статья, размещенная кажется на хабре. Если встречу её снова, то обязательно скину ссылку. Именно в ней более менее подробно и понятным языком был описан процесс создания шаблона для WordPress. Вся остальная информация была представлена небольшими статейками написанными абы как. Ну по крайне мере в рунете. На сегодняшний день, как я вижу, ситуация не особо изменилась.","type":"unstyled","key":"38pku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот ещё один пример, когда может понадобится создать тему с нуля. На одном известном мне сайте изначально был установлен шаблон, который полностью устраивал хозяина и дизайном и функционалом. Но скорость его работы была занижена за счет лишних скриптов и не нужного ему функционала. Я думаю это проблема любого шаблона для любой CMS. После долгих мучений с оптимизацией было решено разработать шаблон с нуля на чистом Bootstrap, чтобы не было ничего лишнего, только то, что нужно. На самом деле это заняло не так много времени. Гораздо больше он бы потратил на оптимизацию готового шаблона. Вся работа заняла около недели. И вуаля в Google PageSpeed 99 пунктов.","type":"unstyled","key":"2n9p2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом уроке я покажу как создать тему для WordPress с нуля используя начальный шаблон Bootstrap 4. На самом деле вы можете использовать любой HTML шаблон или сверстать его самостоятельно суть от этого не изменится.","type":"unstyled","key":"3qhss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Структура шаблона","type":"header-two","key":"8ujvi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я приведу пример основной структуры файлов темы WordPress для создания шаблона блога или новостного сайта. В каждом конкретном случае эта структура может различаться. Например, можно создать разный дизайн для категорий, шаблоны для кастомных типов записей и т.д.","type":"unstyled","key":"b4gii"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"style.css — файл стилей в корне темы. В нём так же указывается основная информация о шаблоне, но можно её не добавлять. Без этого файла WordPress будет выдавать ошибку темы. Лично я создаю его именно для того, чтобы тема работала и оставляю его пустым. ","type":"unstyled","key":"1jbch"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"index.php — содержимое главной страницы ","type":"unstyled","key":"6foje"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"header.php — общая шапка сайта ","type":"unstyled","key":"bgd1q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"footer.php — общий футер сайта ","type":"unstyled","key":"4aqoq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"functions.php — файл с функциями темы ","type":"unstyled","key":"e62m3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"single.php — шаблон записи ","type":"unstyled","key":"a9u1h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"page.php — шаблон страницы ","type":"unstyled","key":"c2c60"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"category.php — шаблон списка записей категории ","type":"unstyled","key":"tgro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"archive.php — шаблон списка записей архивов ","type":"unstyled","key":"8kf0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"404.php — содержимое страницы ошибки 404 ","type":"unstyled","key":"2eihv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"search.php — шаблон страницы со списком результатов поиска","type":"unstyled","key":"722da"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"css/ — папка со стилями ","type":"unstyled","key":"719b6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"}],"text":"js/ — папка со JS скриптами","type":"unstyled","key":"8gc1c"},{"data":{"image":{"id":"5ee895ab76f3fc727f67b71d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"atomic:image","key":"1lpp6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получается вот такой минимальный набор всех нужных файлов для создания шаблона новостного сайта или блога.","type":"unstyled","key":"11q74"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Создание темы WordPress","type":"header-two","key":"7vujt"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":6,"offset":126}],"inlineStyleRanges":[],"text":"Если вы ещё не установили CMS WordPress, то пришло время это сделать. Про то, как установить WordPress можно прочитать в этой статье. Если система уже установлена, то продолжаем.","type":"unstyled","key":"47i0c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, приступим к созданию собственной темы. Для начала нам понадобится создать папку с названием темы в разделе /wp-content/themes/. Я назову её it-blog. Как я уже говорил, чтобы WordPress не выдавал ошибку, внутри этой папки необходимо создать файл стилей style.css. Теперь в панели администрирования в разделе Внешний вид → Темы появится наша тема, где её можно применить к сайту, нажав кнопку активировать. Название темы будет такое же, как и название её папки. На сайте теперь конечно же будет открываться только белая страница, так как тема ещё совсем пустая.","type":"unstyled","key":"31d0e"},{"data":{"image":{"id":"5ee895ab16939b7e802f0506"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Активация новой темы","type":"atomic:image","key":"2ol8c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы можете создать свое изображение темы, добавив файл screenshot.png в папку с темой, а в файле style.css установить название, описание, автора и другую информацию добавив в начало файла примерно такой текст:","type":"unstyled","key":"5o8n6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"ITALIC"}],"text":"/*","type":"blockquote","key":"3qhn6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"ITALIC"}],"text":"Theme Name: IT-Blog","type":"blockquote","key":"b73qp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"ITALIC"}],"text":"Version: 1.0","type":"blockquote","key":"50suj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"ITALIC"}],"text":"Description: Тема Bootstrap 4","type":"blockquote","key":"6t5dv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"},{"length":7,"offset":9,"style":"ITALIC"}],"text":"Author: IT-Blog","type":"blockquote","key":"5tuso"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"ITALIC"}],"text":"Author URI: https://it-blog.ru","type":"blockquote","key":"fniat"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"ITALIC"}],"text":"*/","type":"blockquote","key":"2pd09"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Лично я считаю, что это лишнее, но для эстетики можно потратить немного времени.Теперь внутри папки с нашей новой темой нам нужно создать все файлы в соответствии со структурой описанной выше. Можно создать их все сразу пустыми или создавать отдельно по мере написания кода.","type":"unstyled","key":"afuke"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"HTML шаблон","type":"header-two","key":"52dr3"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":17,"offset":103}],"inlineStyleRanges":[],"text":"Как я уже говорил мы будем использовать стандартный начальный шаблон Bootstrap 4. Скачать его можно на официальном сайте по ссылке Starter template.","type":"unstyled","key":"3qan3"},{"data":{"image":{"id":"5ee895abc64be97c15fe9c7a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Bootstrap v4 начальный шаблон","type":"atomic:image","key":"2rmhm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для его работы понадобятся файлы bootstrap.min.css и bootstrap.min.js, которые мы соответственно добавляем в папки css и js нашей темы. Скачать их можно по кнопке Download source code на той же странице.","type":"unstyled","key":"ah5fn"},{"data":{"image":{"id":"5ee895abd8a44554805066f3"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Официальный сайт Bootstrap","type":"atomic:image","key":"c4ua8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перед тем, как тема будет «разрезана» на шапку и футер вы можете добавить весь исходный код шаблона в файл index.php и увидеть, что тема работает. Путь до папки с темой указывается функцией get_template_directory_uri() — это чтобы сразу в теме указать ссылки для скриптов. Должно получится примерно следующее:","type":"unstyled","key":"440jc"},{"data":{"image":{"id":"5ee895abd2a345208ad14c46"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"atomic:image","key":"e1hjo"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":10,"offset":167}],"inlineStyleRanges":[],"text":"К сожалению в Дзене не разрешается добавлять много кода в статью и выглядит он не читабельным, поэтому выкладываю скрин, а сам код вы можете скопировать на моем сайте it-blog.ru","type":"unstyled","key":"f0d42"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если все сделано верно, то на главной странице сайта отобразится тема Bootstrap 4.","type":"unstyled","key":"8rmit"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Добавляем API WordPress","type":"header-two","key":"bjv9h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"6ah7q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первым делом добавим в тему поддержку API WordPress, а так же выведем тайтл. В тег добавляем следующее:","type":"unstyled","key":"7kgo4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":27,"style":"BOLD"}],"text":"<title><?php wp_title('|', true, 'right');?>","type":"unstyled","key":"dbbie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь заголовок окна браузера будет содержать тайтл из системы WordPress.","type":"unstyled","key":"8fo88"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И ниже подключаем API. Код должен находится внутри тега :","type":"unstyled","key":"dcm73"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2lg9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь если вы посмотрите исходный код сайта, то вы сможете увидеть, что в появилась новая разметка, которую добавил WordPress. Это мета-теги, скрипты и т.д.","type":"unstyled","key":"7fu0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее нужно перед закрывающим тегом добавить следующий код:","type":"unstyled","key":"a0k41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5as8l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эта функция выведет панель инструментов WordPress вверху сайта.","type":"unstyled","key":"8cg98"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Правильное подключение скриптов","type":"header-two","key":"aou7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы вывели скрипты прямо в шаблоне указав путь до них через функцию get_template_directory_uri();. Вы конечно можете оставить это и так. Я и сам так делал. Но по правилам WordPress скрипты должны подключаться через специальную функцию в файле functions.php. Давайте подключим их правильно. Делается это следующим образом:","type":"unstyled","key":"2b5o4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"ITALIC"}],"text":"function itblog_style_frontend() {","type":"blockquote","key":"73aea"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":93,"offset":0,"style":"ITALIC"}],"text":" wp_enqueue_style('bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.min.css');","type":"blockquote","key":"fs1e7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":81,"offset":0,"style":"ITALIC"}],"text":" wp_enqueue_style('styles', get_stylesheet_directory_uri() . '/css/style.css');","type":"blockquote","key":"57d8f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"blockquote","key":"3cp2h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":58,"offset":0,"style":"ITALIC"}],"text":"add_action('wp_enqueue_scripts', 'itblog_style_frontend');","type":"blockquote","key":"4qvdm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"ITALIC"}],"text":"function itblog_include_myscript(){","type":"blockquote","key":"dpeq7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":101,"offset":0,"style":"ITALIC"}],"text":" wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.3.1.slim.min.js', '', '1.0', false);","type":"blockquote","key":"8m9t4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":110,"offset":0,"style":"ITALIC"}],"text":" wp_enqueue_script('bootstrap', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', '', '1.0', false);","type":"blockquote","key":"bsl0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"ITALIC"}],"text":"}","type":"blockquote","key":"4vrpk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":60,"offset":0,"style":"ITALIC"}],"text":"add_action('wp_enqueue_scripts', 'itblog_include_myscript');","type":"blockquote","key":"3bq0b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как вы можете заметить ещё я подключил файл style.css, в нём будут находится пользовательские CSS стили, которые рано или поздно вам понадобятся.","type":"unstyled","key":"6a4ki"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"header.php","type":"header-two","key":"dtokp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, пришло время «разрезать» наш шаблон на шапку и футер. Для чего это нужно? На большинстве сайтов шапка и футер одинаковые на всех страницах, меняется только часть с контентом. Так получается и в нашем шаблоне. После манипуляцией с разделением, шапку и футер станет проще и удобнее изменять сразу для всех страниц. Мы просто отделим от нашего шаблона часть до динамического контента и часть после. Еще я убрал лишнее из шаблона и добавил сайдбар справа. Про него я расскажу позже.Вот что получилось:","type":"unstyled","key":"ao506"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"ITALIC"}],"text":"","type":"blockquote","key":"54tc6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"ITALIC"}],"text":"","type":"blockquote","key":"1llrd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"ITALIC"}],"text":" ","type":"blockquote","key":"dotj7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":74,"offset":0,"style":"ITALIC"}],"text":" ","type":"blockquote","key":"a1g1u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":93,"offset":0,"style":"ITALIC"}],"text":" ","type":"blockquote","key":"4h5nq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":59,"offset":0,"style":"ITALIC"}],"text":" <?php wp_title('|', true, 'right');?>","type":"blockquote","key":"ea8i2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"ITALIC"}],"text":" ","type":"blockquote","key":"4lbjd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"ITALIC"}],"text":" ","type":"blockquote","key":"9cvq4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"ITALIC"}],"text":" ","type":"blockquote","key":"egtfc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":64,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"60ntk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"bhf9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":119,"offset":0,"style":"ITALIC"}],"text":" ","type":"blockquote","key":"58ti1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":201,"offset":0,"style":"ITALIC"}],"text":" ","type":"blockquote","key":"frqc8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":75,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"3aeu1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"342i2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":67,"offset":0,"style":"ITALIC"}],"text":" Главная","type":"blockquote","key":"4nmmg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"ITALIC"}],"text":"
","type":"blockquote","key":"2r42d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":71,"offset":0,"style":"ITALIC"}],"text":" О нас","type":"blockquote","key":"bg4e0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"ITALIC"}],"text":"

Сервис

","type":"blockquote","key":"1e80p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":77,"offset":0,"style":"ITALIC"}],"text":" Контакты","type":"blockquote","key":"3qbp8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"c2e7g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"d8epn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"87q0j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"cn5o1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"12cq0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"9jub"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"98e6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пока меню выводится статично, но это мы исправим позже.","type":"unstyled","key":"4cog7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"footer.php","type":"header-two","key":"f4oeq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляем код футера. Здесь же мы подключаем функцию для вывода виджетов dynamic_sidebar():","type":"unstyled","key":"bf63o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"41h5k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"au4i6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"ITALIC"}],"text":" ","type":"blockquote","key":"bk24m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"568i4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"ITALIC"}],"text":" ","type":"blockquote","key":"7jnnl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"ITALIC"}],"text":" ","type":"blockquote","key":"a7c2r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"ITALIC"}],"text":" ","type":"blockquote","key":"af1j8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"ITALIC"}],"text":"","type":"blockquote","key":"95bm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Регистрация виджетов","type":"header-two","key":"4rceh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы виджеты отобразились на страницах сайта, необходимо зарегистрировать из функцией register_sidebar() в файле functions.php. В аргументах функции я так же добавил немного разметки Bootstrap , которая будет добавлена в каждый блок с виджетом.","type":"unstyled","key":"bfg5n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"ITALIC"}],"text":"if (function_exists('register_sidebar'))","type":"blockquote","key":"ad4la"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"ITALIC"}],"text":"register_sidebar(array(","type":"blockquote","key":"5lnjk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":55,"offset":0,"style":"ITALIC"}],"text":" 'before_widget' => '

',","type":"blockquote","key":"15o3p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"ITALIC"}],"text":" 'after_widget' => '

',","type":"blockquote","key":"hica"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":0,"style":"ITALIC"}],"text":" 'before_title' => '

',","type":"blockquote","key":"d3j97"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":53,"offset":0,"style":"ITALIC"}],"text":" 'after_title' => '

',","type":"blockquote","key":"705pn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"ITALIC"}],"text":"));","type":"blockquote","key":"c0f44"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":4,"offset":193}],"inlineStyleRanges":[],"text":"Ну и теперь в разделе Внешний вид → Виджеты вы можете добавлять в сайдбар нужные вам виджеты путём перетаскивания. Более подробно о создании и добавлении виджетов в WordPress можно прочитать в этой статье.","type":"unstyled","key":"ad1n4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"index.php","type":"header-two","key":"1reh2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"1s1h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы подключить шапку и футер в файлах, воспользуемся функциями get_header() и get_footer(). Ну и между ними добавляем стандартный цикл WordPress. Выглядит он следующим образом:","type":"unstyled","key":"58l0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":6,"style":"BOLD"},{"length":5,"offset":25,"style":"BOLD"}],"text":" ","type":"unstyled","key":"7ahpd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь HTML код и функции вывода значений поста (заголовок, дата, ссылка, текст и т.д.)","type":"unstyled","key":"ctf8t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":6,"style":"BOLD"},{"length":4,"offset":16,"style":"BOLD"}],"text":" ","type":"unstyled","key":"7id2v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Записей не найдено.

","type":"unstyled","key":"4rg7p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":6,"style":"BOLD"}],"text":"","type":"unstyled","key":"cfojn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А вот основные функции цикла, которые нам понадобятся:","type":"unstyled","key":"eot72"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"},{"length":13,"offset":38,"style":"BOLD"},{"length":15,"offset":127,"style":"BOLD"},{"length":10,"offset":160,"style":"BOLD"},{"length":22,"offset":201,"style":"BOLD"}],"text":"the_title() — выводит заголовок поста the_content() — выводит текст анонса или полный текст, если цикл находится внутри записи the_permalink() — ссылка на пост the_time() — дата и время создания поста the_posts_pagination() — пагинация","type":"unstyled","key":"33oc8"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":4,"offset":140}],"inlineStyleRanges":[],"text":"Если вам нужен вывод записей по каким-либо параметрам, то можно воспользоваться классом WP_Query{}. Как его использовать можете прочитать в этой статье.","type":"unstyled","key":"1tnmr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В итоге получился следующий код главной страницы:","type":"unstyled","key":"69ro2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"ITALIC"}],"text":"","type":"blockquote","key":"a3v69"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"4i5b7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":59,"offset":0,"style":"ITALIC"}],"text":"","type":"blockquote","key":"9khcu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":79,"offset":0,"style":"ITALIC"}],"text":"

\">

","type":"blockquote","key":"bne66"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"8datr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":149,"offset":0,"style":"ITALIC"}],"text":" \">

\" alt=\"\">","type":"blockquote","key":"1t2vs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"7i9sv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":110,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"c1q3r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"ITALIC"}],"text":" ","type":"blockquote","key":"a6jsu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":92,"offset":0,"style":"ITALIC"}],"text":" \" class=\"btn btn-primary shadow-none\">Читать далее →","type":"blockquote","key":"60gua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"5jlqv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"fm5td"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"ITALIC"}],"text":"","type":"blockquote","key":"19dk3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"ITALIC"}],"text":"

Записей не найдено.

","type":"blockquote","key":"4cfq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"","type":"blockquote","key":"cq3o1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"ITALIC"}],"text":" 4,","type":"blockquote","key":"ej7od"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"ITALIC"}],"text":" 'end_size' => 2,","type":"blockquote","key":"a3d1f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"ITALIC"}],"text":"));?>","type":"blockquote","key":"10a46"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"ITALIC"}],"text":"","type":"blockquote","key":"1hikv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"Добавляем поддержку изображений в постах","type":"header-two","key":"8i865"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Еще одна нужная функция — это поддержка миниатюр в записях. Чтобы вы могли прикреплять изображения к записям, добавьте в файл functions.php следующий код:add_theme_support('post-thumbnails');","type":"unstyled","key":"24tmt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"single.php и page.php","type":"header-two","key":"cbq7g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как я уже говорил single.php выводит запись, а page.php страницу. В нашем шаблоне эти страницы будут идентичные. Они похожи на другие шаблоны, в них так же подключается хедер и футер, но только без цикла WP:","type":"unstyled","key":"3fqv3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"ITALIC"}],"text":"","type":"blockquote","key":"b96aa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"clihi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":115,"offset":0,"style":"ITALIC"}],"text":"

\" alt=\"\">","type":"blockquote","key":"18mfq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":85,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"ovbp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"ITALIC"}],"text":"","type":"blockquote","key":"49aqj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"ITALIC"}],"text":"","type":"blockquote","key":"acpdt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"ITALIC"}],"text":"","type":"blockquote","key":"fb6me"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"category.php и archive.php","type":"header-two","key":"ccu7d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Данные файлы являются шаблонами категорий и архивов записей. Так же archive.php используется и как шаблон списка записей для меток. Код почти не отличается от других файлов. Так же подключается шапка, футер и циклом выводится список записей:","type":"unstyled","key":"2tlpg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"ITALIC"}],"text":"","type":"blockquote","key":"1vav1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"lkjc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":59,"offset":0,"style":"ITALIC"}],"text":"","type":"blockquote","key":"7i6fe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":79,"offset":0,"style":"ITALIC"}],"text":"

\">

","type":"blockquote","key":"cc92v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"2n39f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":149,"offset":0,"style":"ITALIC"}],"text":" \">

\" alt=\"\">","type":"blockquote","key":"4vtb1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"69ir6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":110,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"9nvvj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"ITALIC"}],"text":" ","type":"blockquote","key":"dkuko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":92,"offset":0,"style":"ITALIC"}],"text":" \" class=\"btn btn-primary shadow-none\">Читать далее →","type":"blockquote","key":"58ufs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"fk5o4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"ITALIC"}],"text":"

","type":"blockquote","key":"720ld"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"ITALIC"}],"text":"","type":"blockquote","key":"cp1tc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"ITALIC"}],"text":"

Записей не найдено.

","type":"blockquote","key":"8dgoo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"","type":"blockquote","key":"8dj6b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"ITALIC"}],"text":" 4,","type":"blockquote","key":"87t3l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"ITALIC"}],"text":" 'end_size' => 2,","type":"blockquote","key":"5cu9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"ITALIC"}],"text":"));?>","type":"blockquote","key":"57hjf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"ITALIC"}],"text":"","type":"blockquote","key":"5ku9g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"search.php","type":"header-two","key":"27j6e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"search.php это шаблон страницы с результатами поиска. У меня его код будет полностью повторять шаблон категории — файл category.php. Т.е. после обращения через форму поиска на странице результатов будет отображаться список найденных постов с пагинацией. Если вас это устраивает, то просто скопируйте вышеприведенный код файла category.php и добавьте его в search.php.","type":"unstyled","key":"dtirn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Добавляем меню","type":"header-two","key":"bm0f2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте изменим статичное меню из нашего шаблона так, чтобы его можно было редактировать из админки WordPress. Для начала регистрируем меню в файле functions.php:","type":"unstyled","key":"cu0a9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":19,"style":"BOLD"}],"text":"register_nav_menus(array( 'top' => 'Верхнее меню', // идентификатор меню и название));","type":"unstyled","key":"k8v9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь в разделе Внешний вид → Меню добавляем пункты меню и сохраняем:","type":"unstyled","key":"1o82s"},{"data":{"image":{"id":"5ee895ad724b9679d0f9ca7d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавление пунктов меню","type":"atomic:image","key":"eirq9"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":4,"offset":242}],"inlineStyleRanges":[],"text":"Осталось вывести меню в шаблоне. Заменяем в файле header.php код нашего статичного меню следующей функцией с указанием идентификатора меню:Более подробно о том, как сделать меню в WordPress читайте в этой статье.","type":"unstyled","key":"34uk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"404.php","type":"header-two","key":"b31ge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ну и осталось добавить код в файл 404.php, который будет отображать шаблон страницы с ошибкой 404. Здесь ничего особенного просто заголовок и текст:","type":"unstyled","key":"ia2l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a1695"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":4,"style":"BOLD"}],"text":"

Ошибка 404

","type":"unstyled","key":"a6h8o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Страница не найдена

","type":"unstyled","key":"1cfac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ddi9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Заключение","type":"header-two","key":"9b5uo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как видите создать свою тему на CMS WordPress с нуля не такая сложная задача. Надеюсь эта статья поможет вам научиться создавать прекрасные сайты с оригинальным и запоминающимся дизайном на этой системе управления. Ну а если возникли вопросы, то задавайте их в комментариях, обязательно отвечу. ","type":"unstyled","key":"d5pt4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"lz6h9OwFJzoVNW0J8ARV"}],"entityMap":{"0":{"data":{"url":"https://zen.yandex.ru/media/id/5e4e5495a4666c694f8a392e/ustanovka-wordpress-na-open-server-5ebfbbac6486254245b18376"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://getbootstrap.com/docs/4.0/examples/","url":"https://getbootstrap.com/docs/4.0/examples/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://it-blog.ru/wordpress/wordpress-sozdanie-temy-s-nulya/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://progme.ru/wordpress/kak-sozdat-vidzhet-wordpress/","url":"https://progme.ru/wordpress/kak-sozdat-vidzhet-wordpress/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"url":"https://it-blog.ru/wordpress/vyvod-zapisej-s-pomoshhyu-wp_query/"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"url":"https://it-blog.ru/wordpress/sozdanie-proizvolnyh-tipov-menyu-v-wordpress/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}