Структура шаблона WordPress, его настройка и редактирование. WordPress

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

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

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

Чтобы попасть в админку блога, нужно зайти по адресу site.ru/wp-admin/. Вместо site.ru подставьте название своего домена.

1 Главная

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

2. Обновления

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

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

3. Записи. Все записи

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

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

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

3.1. Добавить новую

Прежде чем начать публиковать статьи в блог, нужно сделать несколько очень важных настроек. Сделайте их в пункте 8.1 и 11.3. После того, как Вы настроите постоянные ссылки или как их еще называют (ЧПУ), можете приступать к публикации статей.

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

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

Если Вы впервые сталкиваетесь с таким редактором, то посмотрите видео-уроки на YouTube о том, как добавить статью на блог WordPress. После того, как статья добавлена и отформатирована, выберите или создайте для нее рубрику. Одна статья в одну рубрику, запомните это!

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

Работа с картинками

При добавлении фотографий старайтесь всегда прописывать атрибут “Alt”. Если Вы используете свои фотографии, то это позволит Вам из раздела “картинки”.

Достаточно 2-3 слов о том, что изображено на самой картинке. Если не знаете что писать, лучше ничего не пишите.

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

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

Следите за тем, чтобы все Ваши фотографии перед загрузкой на блог имели название латинскими буквами например, moy-dom.jpg.

3.2. Рубрики

Это меню предназначено для создания рубрик. Например, у Вас блог по кулинарным рецептам. Рубрики могут быть такие:

  • Салаты
  • Закуски
  • Напитки

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

У рубрик могут быть подрубрики. Например в “Салаты” могут входить такие подрубрики: “Салаты с курицей”, “Простые салаты”, “Рецепты салатов на зиму” итд. Подрубрики можно создать в меню “Родительская”.

Напишите 2-3 предложения описывающую вашу рубрику. Изложите самую суть. Обязательно сделайте его уникальным. Это значит, что Вы должны сами придумать это описание, а не скопировать его. Как только все поля будут заполнены, можно нажать на кнопку “Добавить новую рубрику”.

3.3. Метки

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

4. Медиафайлы

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

5. Страницы

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

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

В этом разделе Вы увидите все созданные страницы. Если нужно создать новую, то просто перейдите в меню “Добавить новую” и воспользуйтесь редактором, как в меню 3.1.

6. Комментарии

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

7. Внешний вид. Темы

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

Я же рекомендую ставить темы из официального магазина WordPress. Во-первых, они бесплатные, а во-вторых на них нет вредоносного кода или вируса. Чтобы установить новый шаблон, достаточно нажать на “Добавить новую тему”.

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

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

У бесплатных шаблонов есть и минусы. Они плохо оптимизированы под поисковые системы.

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

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

Также в этом разделе Вы всегда можете сменить пароль и email.

10. Инструменты

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

11. Настройки. Общие

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

Напишите название своего сайта. Описание должно быть короткое и понятное. Оно должно содержать всю суть Вашей ниши. Краткое описание можно пропустить. Если есть что написать, то заполните. Можно написать какой-нибудь слоган.

Адрес WordPress и адрес сайта. Тут Вы можете указать то, как будет отображаться Ваш блог. Например, с www или без. https или http. Это очень важный параметр, заполните его обязательно.

Если Вы регистрировали домен и хостинг по моему , то у Вас должен быть сертификат защищенного протокола https. Значит — настройки ставьте, как на картинке. Выберите формат даты и времени тот, который Вам нужен. Меню “написание” пропускаем.

11.1. Чтение

11.2. Обсуждение

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

Например, если добавить слова: www, http://, скачать, бесплатно, то такие комментарии не пройдут автоматическую модерацию. Настройки медиафайлов можно смело пропустить.

11.3. Постоянные ссылки

Одна из самых важных настроек WordPress находится именно здесь. Это настройка постоянных ссылок. Поставьте галочку на “Произвольно” и вставьте туда вот такой шаблон:

/%category%/%postname%.html

Яндекс метрика

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

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

После того как Вы попали внутрь, нажмите на “Добавить счетчик”.

Далее заполните: имя счетчика и адрес сайта, поставьте галочку “я принимаю условие”, создать счетчик. Поставьте галочку на вебвизор и нажмите сохранить. Ниже Вы увидите код счетчика, который нужно установить.

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

Найдите в правой колонке и нажмите на “Заголовок (header.php)”. Вставьте скопированный код в свободное место. Лучше это сделать, где заканчивается .

Нажмите обновить файл. Вернитесь в список счетчиков, нажав на “Счетчики”.

Готово! Через какое-то время счетчик будет фиксировать всех посетителей на Вашем блоге. Нажмите на название и Вы попадете в основное меню.

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

robots.txt

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

Не забудьте исправить в файле свой сайт заменив site.ru и site.ru/sitemap.xml на свой. Также пропишите http или https. Теперь его нужно закачать к себе на сервер в корневую папку, где установлен Ваш блог.

Если вы пользуетесь хостингом «Бегет» , который я рекомендую, то загрузить этот файл вы можете следующим образом. Зайдите в хостинг и нажмите «Файловый менеджер».

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

Зайдите в эту папку нажав 2 раза. Теперь вы попали в корневую папку своего сайта. Теперь нажмите «Загрузить файлы» и «Browse…»

Теперь можете проверить. Введите в поисковой строке такой запрос: https://site.ru/robots.txt в место site.ru подставьте свой сайт. Также учтите значение https или http.

Регистрируем Домен. Настраиваем Хостинг. Устанавливаем Блог!

Заключение

Теперь Ваш блог полностью настроен и готов к работе. Начните наполнять его качественными статьями для людей. Начните потихоньку разбираться в SEO (поисковая оптимизация).

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

С уважением, Сергей Смирнов.

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

Потому при выборе темы оформления движка (CMS) сайта во главу угла стоит поставить читабельность шрифтов, не раздражающие цветовые решения, отсутствие визуальных препятствий для прочтения публикаций. Благо, готовые темы (шаблоны) для популярного движка WordPress, как правило, имеют приятный внешний вид, плюс к этому, использование большей части из них – совершенно бесплатно. А огромнейшее разнообразие тем для WordPress и вовсе считается одним из достоинств этого движка.

Продолжая цикл статей рубрики « », ниже подробно рассмотрим, как установить и настроить тему для WordPress.

1. Активация предустановленных тем для WordPress

Для работы с темами оформления войдём в консоль WordPress и во вкладке «Внешний вид » выберем раздел «Темы ».

В движке WordPress изначально предустановленно несколько тем оформления, которые можно «примерить» на сайт, нажав кнопку «Посмотреть ». Кнопка «Активировать » применит эту тему к сайту.

2. Больше тем в каталоге WordPress

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

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

Для более конкретного поиска подходящей к тематике сайта темы оформления воспользуемся кнопкой «Фильтр », которая позволит выбрать, помимо расцветки, подходящий вариант с нужной разметкой колонок и с уже установленными функциями. После отметки нужных параметров жмём «Применить фильтры ».

Установка тем оформления из каталога проводится точно так же, как и в случае с изначально предустановленными в движок. Жмём кнопку «Просмотреть », чтобы наглядно оценить тему, и, если она подойдёт, нажимаем «Установить », а затем – «Активировать ».

3. Установка сторонних тем для WordPress, скачанных в Интернете

Темы оформления для сайта или блога можно найти не только в каталоге WordPress, но также и на различных сайтах в Интернете, в частности, в специальном разделе на официальном сайте движка WordPress.Org . Здесь также можно искать темы по отдельным коллекциям или с помощью фильтров.

Выберем здесь тему и скачаем её, нажав на кнопку «Download ».

Далее скачанный архив темы необходимо распаковать и перенести в папку с темами WordPress. В папке с файлами движка выбираем папку «wp-content», затем – «themes». Если сайт был создан на , этот путь может быть следующим:

С:\inetpub\wwwroot\имя-сайта\wp-content\themes\

Ну, или если сайт находится на платном хостинге, перемещаем тему в:

public_html/wp-content/themes /

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

4. Настройка тем для WordPress

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

Чтобы внести в тему оформления свои коррекции, во вкладке «Внешний вид » выбираем раздел «Настроить ».

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

Для шапки сайта можно установить свой логотип.

Организацию сайта и его функционал можно настроить с помощью виджетов.

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

Для сохранения всех проделанных изменений жмём кнопку «Сохранить и опубликовать ».

Каждая отдельная тема оформления может содержать свои уникальные настройки, которых нет у других настраиваемых тем.

Установка и настройка тем для WordPress – только часть процесса создания «облика» сайта или блога. Есть ещё два важных вопроса, которые детально рассмотрены в статьях сайта:

Помогла ли Вам данная статья?

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

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

Так вот, чтобы у каждого, кто переходит на ваш блог/портал «радовался глаз» и благодаря этому человек задерживался бы на страницах, необходимо настроить шаблон, сделать его красивым, удобным…

Какие варианты решения данной задачи существуют

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

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

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

Это первый вариант — сделать заказ!

Второй вариант — попробовать самостоятельно.

Как именно это провернуть, я расскажу в сегодняшнем выпуске.

Третий вариант — купить готовый шаблон! Но его тоже можно редактировать и настраивать.

Как настроить тему wordpress

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

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

Как бы то ни было сейчас все разберем.

Как установить шаблон вордпресс из интернета

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

Итак, откройте поисковик и введите запрос «шаблоны вордпресс». Мне нравится один очень популярный сайт:

http://wp-templates.ru

Перейдите на него, нажмите на кнопку демо под понравившейся темой и посмотрите, как он на вид. Чисто, упал глаз на него или нет. Если да, то смело кликайте по кнопке «Скачать».

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

Опять же, перейдите в административную панель -> внешний вид -> темы -> добавить новую -> теперь найдите любой шаблон, наведите курсор мыши и нажмите просмотреть.

Всё, больше лишних действий не будет. Как можно было заметить, мы работали только со вкладкой «Внешний вид».

Настройка шаблона (темы) wordpress под себя

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

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

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

Например, в недавнем выпуске я рассказывал, . Это не один из стандартных виджетов вордпресса, а сторонний виджет. Чтобы его установить, потребуется воспользоваться виджетом «Текст» и при этом нам нужен скрипт для вставки. В статье, ссылка выше, я про это подробно рассказывал.

Что можно расположить в боковой панели?

У меня в сайдбаре очень небольшой инструментарий. Из вордпрессовских виджетов установлен только «Поиск». А «Интересные выпуски» я прописал от руки.

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

А порядок расположения должен быть примерно такой: сначала обязательно «Поиск», потом рубрики, а дальше интересные записи и прочее.

Как установить виджет?

Наведите курсор мыши на вкладку «Внешний вид», нажмите на «Виджеты».

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

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

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

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

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

Каким образом происходит настройка шаблона WordPress?

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

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

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

Из чего состоит тема оформления для WordPress?

Главным образом из php-файлов, css-файлов, изображений и скриптов, используемых в теме. Все эти файлы находятся в папке \wp-content\themes\название_вашей_темы\

Список php-файлов а так же основной css стиль темы можно так же увидеть перейдя в админ. панель на вкладку Дизайн — Редактор, там же можно и редактировать их. Однако для серьезных изменений советую использовать Notepad++ он заметно облегчает работу с кодом. При сохранении не забывайте ставить кодировку файла utf_8

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

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

Шапка сайта.

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

Основной контент

  • 404.php который отвечает за вывод страницы с ошибкой 404.
  • archive.php который отвечает за страницы с архивами такими как рубрики, метки, календарь и т.д.
  • index.php — главная страница сайта
  • page.php отвечает за вывод страницы «Страницы» пардон за каламбур) ее вы видите если кликаете у меня вверху на «Об авторе», «Карта сайта» «Гостевая» и т.д.
  • single.php отвечает за вывод конкретной записи, наподобие той, которую вы читаете в данный момент 🙂
  • comments.php нетрудно догадаться отвечает за блок с комментариями
  • recent-comments.php недавние комментарии
  • и т.д.

Боковая колонка (sidebar)

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

Подвал сайта (footer)

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

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

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

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

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

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

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

Первый шаг создания настроек

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

При переходе к пункту «Внешний вид» появится пункт «Настройки».

Создание панели настроек

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

WP_Customize_Manager::add_panel(WP_Customize_Panel|string $id, array $args = array())

Например:

$wp_customize->add_panel("panel_id", array("priority" => 10, "capability" => "edit_theme_options", "theme_supports" => "", "title" => "Заголовок", "description" => "Описание",));

Параметры:

  • args - аргументы
    • capability - возможности, необходимые для панели. По умолчанию edit_theme_options
    • theme_supports - тематические функции, необходимые для поддержки панели
    • title - отображаемое название панели
    • description - отображаемое описание панели
    • type - тип панели

Создание секции настроек

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

WP_Customize_Manager::add_section(WP_Customize_Section|string $id, array $args = array())

Add_action("customize_register", function($customizer){ $customizer->add_section("example_section_one", array("title" => "Новые настройки", "description" => "Описание секции", "priority" => 11,)); });

Параметры:

  • id - обязательный параметр, идентификатор панели
  • args - аргументы
    • priority - приоритет панели, определяющий порядок отображения панелей и разделов. По умолчанию 160
    • panel - идентификатор панели, к которой относится секция
    • capability - возможности, необходимые для секции. По умолчанию edit_theme_options
    • theme_supports - тематические функции, необходимые для поддержки секции
    • title - отображаемое название секции
    • description - отображаемое описание секции
    • type - тип секции
    • active_callback - активный обратный вызов
    • description_hidden - скрыть описание за значком справки, вместо встроенного над первым элементом управления. Значение по умолчанию false.

Добавление настроек

Существует несколько типов настроек:

Настройка в виде чекбокса (галочки):

$customizer->add_control("example_text", array("type" => "checkbox", "label" => "Выбрать", "section" => "example_section",));

Настройка в виде радио кнопок (флажков):

$customizer->add_setting("radio", array("default" => "val_1")); $customizer->add_control("radio", array("type" => "radio", "label" => "Переключатели", "section" => "example_section", "choices" => array("val_1" => "val_1", "val_2" => "val_2", "val_3" => "val_3",),));

Настройка в виде селекта (выпдающего списка):

$customizer->add_setting("select", array("default" => "item_1")); $customizer->add_control("select", array("type" => "select", "label" => "Список", "section" => "example_section", "choices" => array("item_1" => "Первый", "item_2" => "Второй", "item_3" => "Третий",),));

Настройка в виде списка страниц Wordpress:

$customizer->add_setting("pages", array("sanitize_callback" => "example_sanitize")); $customizer->add_control("pages", array("type" => "dropdown-pages", "label" => "Выберите страницу", "section" => "example_section",));

Настройка в виде палитры (выбора цвета):

$customizer->add_setting("colors", array("default" => "#FFFFFF", "sanitize_callback" => "sanitize_hex_color",)); $customizer->add_control(new WP_Customize_Color_Control($customizer, "colors", array("label" => "Палитра цвета", "section" => "example_section", "settings" => "colors",)));

Настройка в виде загрузки файлов:

$customizer->add_setting("files"); $customizer->add_control(new WP_Customize_Upload_Control($customizer, "files", array("label" => "Загрузить файл", "section" => "example_section", "settings" => "files")));

Настройка в виде загрузки изображений:

$wp_customize->add_setting("images"); $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, "images", array("label" => "Загрузка изображения", "section" => "example_section", "settings" => "images")));

Вывод настроек в теме

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

Функция get_theme_mod() включает в себя следующие параметры:

  • $name - имя, идентификатор настройки
  • $default - значение по умолчанию, которое будет отображаться если нет значения в настройки

Например:

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

Похожие публикации