Верстка шаблона Wordpress из HTML макета. Сайдбар после контента. Удаляем, меняем размер, перемещаем элементы
Здравствуйте.
Рад приветствовать вас в курсе "Минимальная тема WordPress своими руками".
Это курс из небольшой серии практических и теоретических занятий. В результате вы создадите шаблон, который будет включать в себя все минимально необходимые файлы, которые чаше всего используются и формируют основную структуру темы.
Работая с блогом Wordpress, сразу же сталкиваешься с такими понятиями как шаблон и тема . Давайте разберемся что это такое и зачем это нужно.
Вот небольшое видео, которое должно прояснить ситуацию.
Если говорить простым языком, то тема Wordpress - это набор файлов, которые отвечают за внешний вид вашего блога в браузере, то, как он будет выглядеть и будет оформлен. Эти файлы дают браузеру информацию о том, каким образом, в каких местах нужно выводить информацию и каким образом ее нужно отображать.
Тема - это костюм или одежда для вашего блога.
Идея в том, что вы можете легко менять эту одежду (т.е. внешний вид блога), но он при этом остается в рабочем состоянии.
Понятие шаблон - это более узкое понятие. Шаблон - это те файлы внутри темы, которые формируют вывод информации нужным образом. Например, шаблон для вывода записей блога, шаблон для вывода страниц, шаблон для вывода рубрик и.т.д.
Шаблон, по сути, это просто файл с расширением php, который содержит в себе HTML-код и php-функции.
Если разобраться, то все файлы внутри темы Wordpress можно разделить на несколько групп:
- Файлы стилей оформления с расширением *.css . Отвечают за внешний вид элементов: их размер, цвет, отступы и.т.д.
- Шаблоны . Отвечают за то, какую информацию и в каких местах нужно выводить. Это файлы с расширением php.
- Файл дополнительного функционала functions.php . Позволяет перенести или изменить какой-то функционал из служебных файлов wordpress и внедрить его в тему.
- Изображения , которые будут использоваться для данной темы.
Хранятся эти файлы в директории wp-content/themes/. Для каждой темы создается своя папка.
Примерно, файлы шаблона выгледят вот так:
Темы можно менять через главное меню панели управления «Внешний вид – Темы»:
Возникает вполне логичный вопрос, а зачем вообще нужны темы (шаблоны)?
Основная идея их использования заключается в разделении системных (служебных) файлов и файлов, которые отвечают за представление и внешний вид блога.
Таким образом, они работают независимо друг от друга.
Чем это хорошо?
Вы можете без проблем обновлять тему или версию Wordpress независимо друг от друга. Это очень удобно и быстро.
Этот туториал покажет, как создать новый шаблон страницы для шаблонов WordPress Cherry Framework .
Войдите в админ панель WordPress.
Откройте меню Страницы -> Добавить новую (Pages -> Add New) и создайте новую страницу с новым шаблоном страницы.
Введите заголовок страницы и сохраните изменения. В правой колонке в панели вы можете выбрать один из используемых в вашей теме шаблонов страницы. Вам необходимо добавить новый шаблон станицы в этот список. Все эти шаблоны находятся в папке на вашем сервере. Но вам необходимо добавить новый шаблон страницы в папку wp-content/themes/theme##### .
Создайте новый.php файл в любом редакторе, например, Dreamweaver или Notepad++, и назовите его, например, new.php . Добавьте в этот файл следующий код:
Сохраните файл и загрузите его в папку wp-content/themes/theme##### на ваш сервер.
Теперь вернитесь к странице, которую вы создали в админ панели WordPress. В панели Атрибуты страницы (Page Attributes) вы можете выбрать новый шаблон страницы под названием “Пользовательский” (“Custom”).
Cнова откройте файл new.php file и начните добавлять свой контент. Файл может содержать все, что вы захотите, включая неизменяемый контент или элементы макета страницы, которые будyт выводить ее контент.
Вы можете использовать элементы кода других шаблонов страницы из папки wp-content/themes/CherryFramework , чтобы создать специфическую страницу.
Давайте сначала добавим хедер и футер в новый шаблон страницы:
Если вы сохраните изменения, то сможете увидеть их на странице:
Теперь необходимо выбрать вид контента, который вы хотите использовать на этой странице. Допустим, у вас нет отдельного шаблона страницы для пользовательских постов “Наша команда” (“Our Team”). И вам нравится дизайн шаблона страницы Отзывов (Testimonials) и вы бы хотели использовать этот дизайн для постов “Наша команда” (“Our Team”). Для этого в меню Дизайн -> Редактор (Appearance -> Editor ) вы легко найдете файл, который содержит код шаблона страницы Отзывов (Testimonials). Его название page-testi.php .
Откройте этот файл для редактирования. Скопируйте только код контента, так как вы уже добавили хедер и футер (ниже приведен пример данного кода, ваш код может выглядеть иначе):
Вставьте скопированный код в файл new.php. Замените Template Name: Custom на Template Name: Team
И замените page-testi.php на new.php в этом коде.
Данный код также содержит ссылку на файл loop/loop-testi.php . Это еще один файл, который вам необходимо скопировать и редактировать. Скопируйте файл loop-testi.php из папки wp-content/themes/CherryFramework/loop и вставьте его в папку wp-content/themes/theme#####/loop (если в папке вашей темы отсутствует папка loop , вам следует создать ее). Переименуйте этот файл, например, на loop-new.php и откройте его для редактирования. Замените слово “testi” на слово “team” во всех строчках файла и сохраните изменения. (Для замены слов вы можете использовать комбинацию клавиш Control (Command) + F).
Когда файл loop-new.php создан и отредактирован, снова откройте файл new.php и замените loop/loop-testi.php на loop/loop-new.php в его коде. В результате ваш код будет выглядеть следующим образом:
Сохраните изменения и проверьте вашу новую страницу. Теперь она должна содержать пользовательские посты “Наша команда” (“Our Team”) с дизайном страницы Отзывов (Testimonials).
Научились создавать элементы меню, создали страницу о блоге и узнали какие страницы должны быть на сайте.
В сегодняшней части урока мы познакомимся с виджетами бокового меню и постараемся сделать привлекательное расположение боковой колонки. Так же пробежимся по остальным элементам настроек, из этого урока станет ясно, что настраивать особо и нечего тут. Но всё же, я не могу оставить это без внимания.
Начнём работать с шаблоном.
Настройка шаблона wordpress
Для начала нужно зайти в панель управления, и попасть во внешний вид — настроить.
После этого мы попадаем в панель настройки шаблона, здесь мы и поработаем. В этом пункте можно увидеть:
Свойства,
Разметка,
Изображения заголовка,
Фоновое изображение,
Статическая главная страница.
Для начала нас интересует ВИДЖЕТЫ . Зайдём в него… В этом пункте нас интересует ГЛАВНАЯ БОКОВАЯ ПАНЕЛЬ. В ней нужно удалить СВЕЖИЕ ЗАПИСИ, потому что они у нас будут отображаться на главной (дублировать контент нет смысла).
Виджет АРХИВЫ так же нам не нужен, потому что у нас нет статей на несколько лет, соответственно удаляем.
МЕТА тоже удалим, это нам не понадобится, хотя подумайте, если вам нужен, можете оставить. Но я для себя его удалю, так как мне он не понадобится.
Следующее, что мы будем редактировать — СВОЙСТВА САЙТА , зайдите в этот пункт.
Тут достаточно просто, введите название и краткое описание. Если вы не хотите, чтобы описание выводилось, оставьте поле пустым.
Переходим к следующему. ЦВЕТА
Тут просто, выбирается цвет фона и цвет отображения ссылок. Если вам не нравится синий цвет ссылок, легко можно поменять его на любой другой.
Так же, выбор цветовой схемы. Тёмная и Светлая, но я не советовал бы использовать тёмную тему, чтение с таких тем нагружает глаза.
ИЗОБРАЖЕНИЕ ЗАГОЛОВКА . В теме несколько заголовков, как вы наверное могли уже заметить, они меняются при обновлении. Можно вставить собственные заголовки, для этого нужно загрузить файлы размером 1000 пикселей ширины на 288 высоты.
Остальные элементы можно не трогать. Фоновое изображение можно установить по вкусу, если вас не устраивает однотонный цвет. Меню можно не трогать, потому что у нас уже есть горизонтальное. Статическая главная страница, оставляйте без изменений, по умолчанию стоит показ последних статей, статическая страница будет выводиться на главной, без изменения.
На сегодня мы завершили пробежку по шаблону, вот такая короткая получилась статья, надеюсь информация стала полезной для новичка в создании своей личной странички в интернете. В следующей статье рассмотрим защиту блога двумя важными плагинами, которые обязательно должны стоять.
Подписывайтесь на обновления статей, чтобы не пропускать новых уроков по системе WordPress.
До скорых встреч.
С уважением С.Васильев
Благодаря тщательно проработанной платформе тем и интуитивно понятному дизайну, вы можете менять оформление и содержимое сайта перетаскивая необходимые элементы с места на место, добавлять новый контент, при этом сразу видя все правки. Это не занимает много времени и действительно просто.
Теперь к каждому зарегистрированному домену доступен бесплатный WordPress хостинг, а вместе с ним простой и удобный редактор шаблонов Upfront.
Мы подготовили инструкции из 5 частей с конкретными примерами, о том, как создать WordРress сайт с помощью конструктора Upfront:
Мы возьмем тему Spirit и полностью переделаем ее области, контент, шрифты и другие элементы, превращая это:
В эту тему с собственным стилем, цветами, шрифтами, кнопками, картинками, контактными формами и другими элементами:
Давайте начнем.
Вход в WordPress панель и выбор темы
После того, как вы зашли в свой личный WordPress кабинет вам нужно выбрать тему с которой вы будете работать. По умолчанию у вас уже выбрана тема. Как мы говорили ранее, для примера, мы взяли тему Spirit. Для этого наводим на тему и жмем кнопку Активировать . Тема выбрана.
Если хотите выбрать другой шаблон, можете на каждой из тем нажать Предварительный просмотр , что бы определиться с подходящей.
Удаляем, меняем размер, перемещаем элементы
Давайте начнем с удаления.
Все что вам нужно сделать это навести курсив на лишний элемент и нажать крестик в верхнем углу. Если вы сделали это случайно, что бы вернуть все назад пользуйтесь комбинацией клавиш Ctrl+Z.
Менять размер блока аналогично просто. Давайте поменяем размер этого же элемента. Наводим курсор, кликаем на угол и тянем в нужную сторону.
Примечание: Если вы пытаетесь поменять размер логотипа в теме и у вас не выходит, это из-за заданного по умолчанию размера картинки. Замените на собственный логотип или просто удалите этот.
Меняем цвет темы
Бывало такое что вы находите хорошую тему и вам все в ней нравится кроме цветового решения?
Upfront позволяет вам полностью управлять цветами темы из одной панели. Если вы передумаете, вы можете заменить цвета в любой момент. Это значит, что вы можете сменить цвет текста, рамок, фона и прочее. Шаблоны Upfront, как огромная разукрашка с широкой цветовой палитрой для вашего сайта:-)
После перехода в конструктор слева у вас будет панель настроек. Нажимаем на выпадающие меню Настройки темы/Theme Settings и выбираем пункт Цвета/Colors. Перед вами 6 цветов темы заданных по умолчанию.
Допустим у вас есть брендовые цвета и вы знаете их номера, в таком случае вам нужно только кликнуть на цвет и сменить номер, а если нет, то просто подберите в палитре те, которые вам по душе. По завершению кликаем ОК
.
Добавляем текст
Тут все просто: кликаем дважды на область с текстом что бы сделать активной ее редактирование, еще двойной клик, чтобы выделить слово и трижды если нужно выделить параграф. Над текстом появится панель инструментов для работы с ним. Вот полный список опций по редактированию:
- Тип элемента/Type Element – Включает в себя заголовки H1, H2, H3, H4, H5, H6, обычный абзац и формат кода
- Bold – Делает шрифт жирным
- Italics – Курсив
- Alignment – Выравнивание текста по краям
- Список/List – Маркированый или нумерованый список
- Blockquote – Оформление текстового блока как цитату или обычный блок
- Ссылка/Link – Возможность вставить в текст якорь,ссылку на конкретный URL , блок, страницу или публикацию, с открытием в этом же или в новом окне.
- Иконки/Inline Icons – Набор иконок
Панель инструментов позволяет указывать размер выбранной иконки, делая ее больше или меньше. Как только вы закончите работу с этим инструментом, просто кликните в любой другой области страницы и панель исчезнет.
Типографика
Размеры шрифтов, их стили и цвет редактируются в боковом меню: Настройки темы — Типографика .
Для каждого типа элемента, вы можете указать его вид шрифта, стиль, цвет, размер и высоту строки.
Вы также можете добавить пользовательские правила CSS, но мы рассмотрим это позже, как часть другого поста в этой серии.
Менеджер шрифтов/Theme Fonts Manager позволяет добавить любой шрифт Google к вашей теме. Кликни на Theme Fonts Manager и выбери из выпадающего списка подходящий шрифт, кликни на него и жми Добавить/Add, чтобы он появился в списке. Этот шрифт станет доступен тебе в выпадающем списке при редактировании текста, как на примере:
Примечание: многие Google шрифты не поддерживают кириллические символы.
Одновременное редактирование текста
Лучший способ стилизовать текст, включая заголовки и параграфы, это сделать все одним махом.
Самый простой способ сделать это — добавить образцы текста на сайт, стилизировать в Настройках темы/Theme Settings , а затем удалить.
Вот как это сделать:
- Скопируйте образец текста, который закачан на CodePen и убедитесь, что форматирование остается неизменным
- Вставить текст в любой текстовый элемент Upfront
- Перейдите к Настройкам темы/Theme Settings и выберите Типографию/Typography , если он еще не открыт
- Для каждого типа элемента выберите вид, стиль, цвет, размер и высоту строки
Образец текста обновится автоматически после того как вы настроите все желаемое. Это позволит вам увидеть все изменения текста в общем. С точки зрения дизайна, это позволит вам легко оценить или вписываются цвета и стиль вашего шрифта в общий дизайн.
Здравствуйте, уважаемые читатели! Сегодня я решил затронуть очень важный вопрос алгоритма действий WP при взаимодействии с шаблонами. Это актуально, поскольку понимание нюансов работы движка с файлами, отвечающими за составные части , позволит быстро и корректно производить необходимые изменения.
В будущем неоднократно придется редактировать уже имеющуюся или создавать новую страницу на своем блоге либо веб-сайте, я вас уверяю. Даже если вы успешно установите ту или иную тему, абсолютно нельзя гарантировать, что вас все устроит. И если вдруг сразу будете всем довольны, с течением времени все равно захочется что-то подправить или кардинально изменить.
В конце концов, знания никогда не бывают лишними, они позволят сэкономить не только драгоценное время, но и ваши деньги, поскольку самое необходимое, экстренное и требующее оперативного вмешательства вы сможете делать сами, а не обращаться за каждой мелочью к специалистам.
Как установить тему и редактировать шаблоны WordPress
Если вы перейдете по ссылке, данной в самом начале настоящей публикации, то узнаете, как активировать имеющиеся по умолчанию темы в , а также каким образом их загружать со сторонних ресурсов и устанавливать через ту же административную панель.
Однако, если вы желаете постигнуть всю суть работы с сайтом и получить дополнительные знания, то стоит попробовать загрузить и установить для начала тему с помощью какого-нибудь ФТП клиента (я, например, использую ).
Это программа позволяет производить любые действия с файлами, расположенными как на локальном компьютере, так и на удаленном сервере хостинга ( и читайте о том, что это такое и как приобрести место для своего проекта), где "живет" ваш сайт.
Я давал уже свои рекомендации, откуда лучше выбирать бесплатные и платные темы (в том же материале, ссылка на который представлена в начале статьи). Вкратце отмечу, что скачивать желательно с официальных сайтов, например, отсюда или отсюда . Сначала скачайте тему на компьютер, а затем проделайте следующие действия:
- Распакуйте архив, кликнув по нему правой кнопкой мыши и выбрав соответствующую операцию;
- Получив доступ по FTP к файлам вашего сайта, загрузите папку, полученную после разархивирования, на хостинг в директорию (папку) themes
В принципе, после этого тема WordPress установлена. Для того, чтобы подключить оформление к своему сайту, требуется лишь активировать ее в панели управления. В дальнейшем редактировать файлы шаблонов страниц можно будет через ту же админ панель, пройдя в раздел «Внешний вид» - «Редактор» :
Там с правой стороны дан список всех шаблонов, входящих в состав данной темы. В дальнейшем при необходимости вы можете пользоваться этим редактором для изменения вида страниц вашего сайта. Но! Я изначально не советую применять этот инструмент, особенно новичкам, потому что в случае какой-нибудь ошибки вы с легкостью "положите" свой сайт, после чего на поиски причины можете потратить кучу времени и нервов.
Гораздо удобнее с этой точки зрения , которая также устанавливает соединение по FTP, имеет подсветку синтаксиса, а в случае сделанной вами ошибки позволяет возвращать исходное содержание файлов на несколько шагов. Впрочем, оцените сами. Вот вид вебстраницы в разделе редактора шаблонов админки Вордпресс:
А вот какой интерфейс для редактирования предлагает Нотпад плюс плюс:
Как видите, разница очевидна и даже при беглом сравнении сторонний редактор выигрывает с подавляющим преимуществом. Ну а когда вы попробуете весь функционал Notepad++, все оставшиеся сомнения развеются окончательно.
И еще. Редактирование шаблонов WordPress я советую осуществлять на локальном сервере, то бишь на своем компьютере (здесь Денвер, а еще лучше, Open Server вам в помощь). Сделали все нужные изменения, протестировали, а затем уже заливаете файлы на хостинг. Эксперименты с "живым" сайтом могут дорого стоить.
Файловая структура шаблонов страниц
Теперь разберем, какие файлы и шаблоны могут входить в состав загруженной темы, задача которых определять лицо вашего проекта, то есть вид всех его страниц, отображаемых в браузере. После установки темы вы получите путь до ее директории:
Ваш_сайт/wp-content/themes/название_вашей_темы
Для моего блога в папку с одной из установленных тем этот путь выглядит так:
Сайт/wp-content/themes/country
При просмотре в окне редактора Нотпад++ папка со всеми файлами вашей темы WordPress будет выглядеть следующим образом:
В структуру входят файлы с расширением.php, среди которых можно выделить именно шаблоны, призванные отображать целые страницы , которые являются основными, то есть присутствуют практически в любой теме, такие как главная (index.php), страница записей (single.php), статические страницы (page.php).
Однако существуют шаблоны, которые отвечают за вывод специально созданной вебстраницы. Например, на моем блоге одно время существовала на странице , с целью ее установки был создан файл mail.php.
Кроме того, есть шаблоны, которые нужны для конструирования отдельных частей, отображаемых на всех страницах сайта. Это шапка, или хидер (header.php), левая и/или правая колонка, иначе сайдбар (sidebar.php), подвал, или футер (footer.php). Схематически такую конструкцию с областями страницы можно представить так:
Как видно из скриншота, если шапка, сайдбар, подвал на любой странице будут выглядеть одинаково, то будет зависеть от типа вебстраницы, который и будет определяться соответствующим файлом с расширением.php.
На современном этапе движок WordPress позволяет добиться отображения разного содержания футера, хидера и сайдбара на главной, статической и страницах записей, а некоторые современные темы позволяют настроить это через админку.
Иерархия шаблонов WordPress и последовательность вывода страниц
Я же попробую кратко пробежаться по пунктам и объяснить, в какой последовательности выводит ту или иную вебстраницу WordPress, учитывая ее место в иерархической шкале приоритетов.
Дело в том, что в каждой теме изначально существует свой набор файлов, некоторые из распространенных могут отсутствовать . Например, может не быть шаблона category.php, который отвечает за вывод рубрик (категорий). В этом случае WordPress взаимодействует с файлом index.php и оформление страницы с категориями будет абсолютно тождественным с главной.
Начнем с домашней вебстраницы. Приоритет здесь отдан Home . То есть последовательность, с которой Вордпресс будет взаимодействовать с шаблоном, следующая: сначала происходит запрос Home, если его нет, то WordPress обращается к основному шаблону Index :
- Home (главный приоритет);
- Index.
Если конструируется отдельная статья блога, шаблоном которой по умолчанию является Single , то последовательность обращения будет такой:
- Single-{post_type}. Скажем, если в конкретном случае тип записи product, то WP будет обращаться к шаблону single-product.php;
- Single;
- Index.
Для статической страницы Page иерархия следующая:
- Custom template (пользовательский шаблон, который создан специально для конкретной вебстраницы);
- Page-{slug}. Здесь slug - короткое название (псевдоним) страницы. Например, если в составе темы присутствует файл с названием page-recent-news, то WP обратиться к нему;
- Page-{id}. Если вебстраница отождествляется по конкретному идентификатору (id) 12, то именно она будет следующей по иерархии, ежели отсутствуют указанные выше;
- Page;
- Index.
Чтобы вывести страницу рубрик, Вордпресс предпримет поиск специального файла, затем будет искать по id. Если таких шаблонов не существует, то преимущество получит общий шаблон Category , далее по убывающей Archive и Index:
- Category-{slug};
- Category-{id};
- Category;
- Archive (архив);
- Index.
Аналогичная картина вырисовывается и для тега (метки). В первую очередь специальный шаблон, далее на основе id, после чего Tag , Archive и Index:
- Tag-{slug};
- Tag-{id};
- Archive;
- Index.
- Author;
- Archive;
- Index.
Продолжаем, осталось немного. Существует возможность наличия страницы временного архива Date . В этом случае WP после неудачи будет искать Archive, после него Index:
- Date;
- Archive;
- Index.
На подавляющем большинстве ресурсов используется страница поиска, которая определяется шаблоном Search . В случае его отсутствия - файл основного шаблона Index:
- Search;
- Index.
- Index.
Наконец, вполне может оказаться, что в установленной вами теме предусмотрена отдельная вебстраница для отображения продуктов различных приложений (видео, аудио, изображения). В этом случае иерархия шаблонов следующая:
- Image, video, audio;
- Application;
- Attachment;
- Index.
На сегодня это все. Данный пост может стать отправной точкой для понимания принципа работы Вордпресс и основой для последующих статей на эту тему. Поэтому милости прошу подписываться на свежие публикации , которые обещают быть весьма интересными и познавательными. Ну и в заключение, как водится, видео: