14.08.2012
admin
Мне нравится ковыряться в различных wordpress premium темах вордпресса. Какое-то время назад я рассказывал о , с которой фактически и началось мое углубленное изучение шаблонов wordpress премиум класса.
На самом деле мое первое знакомство с premium темами началось еще с Duotive Three шаблона, у автора которого были ролики по работе с данным шаблоном. Так как я взялся за непростую задачу сделать красивый интернет-магазин на вордпрессе с возможностью переключения на 2 языках, мне было сложно с этим всем возиться. Пришлось потратить кучу нервов. В итоге я сделал что-то типа недоделанного магазина часов, который у меня вышел не так как я хотел. К сожалению сайт не сохранился. Хотя другие говорили, что им понравилось.
Что такое вордпресс премиум тема
Если кто не знает, что такое wordpress premium theme, то в двух словах можно сказать так. Это многофункциональный красивый шаблон для CMS wordpress, позволяющий настраивать многоразличный вид главной и других страниц сайта. Большая особенность данных шаблонов это наличие очень красивых слайдов на главной странице. Огромный недостаток данных тем это отсутствие русской технической техподдержки. Поэтому, все технические моменты работы с шаблонами приходится выяснять на английском языке у разработчиков тем. Конечно в Рунете можно найти какие-то мануалы, описание различных настроек. Но для более глубоких настроек требуется знания более продвинутого уровня. Поэтому приходится многие вещи узнавать экспериментальным путем, либо на специальных англоязычных форумах типа themeforest.net.
В этой статье я б хотел дать пару советов по поводу создания сайтов на шаблонах класса премиум. Какой бы вы сайт не делали, для заработка на трафике или продажи ссылок, вам стоит знать про некоторые особенности premium тем. По поводу заработка на ссылках, есть специальные сервисы типа как Тиц поднять. Сервис, которые могут прогнать ваш сайт по различным жирным сайтам, повысив при этом ТИЦ. Но я б советовал вам быть осторожным к подобным предложениям, так как большинство из них не могут дать нужного эффекта в сегодняшних реалиях.
Как установить premium шаблон для wordpress видео
Что вы должны знать про wordpress premium шаблоны
- Кодировка UTF-8 Unicode. Если вы видите у себя в админке или на сайте проблемы с кириллицей, а именно у вас отображаются такие????????? символы. Тогда вам нужно сохранить базу, которая в phpAdmin в кодировку UTF-9 Unicode.
- Шорткоды (shortcodes). Научитесь работать с шорткодами, иначе не имеет смысла ставить премиум шаблон. Эти специальные коды, которые можно найти в инструкциях каждого шаблона. С помощью них можно размещать в разных местах различные элементы сайта. В некоторых темах можно увидеть реальные примеры работы шорткодов в Live preview шаблона.
- Читайте руководство к theme. Прежде чем ставить премиум тему внимательно посмотрите инструкцию которая находится в таких папках как Documents. Как правило, беглого знания английского языка будет достаточно, так как в основном все эти руководства содержат понятливые рисунки или видео. Обратите внимания, что в инструкциях могут быть данные такие указания как поставить определенные права на папку, загрузить дополнительные плагины и т. п.
- Проблемы с картинками. Пожалуй самая глобальная проблема, которая возникает у вебмастеров, это настройка слайдов на главной странице, а также некоторые глюки с картинками. Если какая-то картинка у вас не загружается, убедитесь, что на папке, в которую вы загружаете, выставлены верные атрибуты. Типа 777 и т. п. Выставите атрибуты (права) 777 папке cache, которая находится в includes в папке шаблона. Также важно, чтобы у вас были фото правильного размера.
- Виджеты. Многие не знают, что в виджеты темы можно размещать не только html обычный код, но и нужные вам шорткоды.
- Шрифты. Первое, что шокирует людей, когда они ставят premium шаблон, это отсутствие русских надписей на сайте. Все дело в , который не очень дружит с кириллицей, поэтому необходимо отключить отображение cufon шрифта в админке темы. Или загрузить новый. А для этого вам придется или где-то скачать или сделать самому шрифт cufon, который был бы совместим с русскими символами. Загружаются шрифты в папку fonts. Но этого недостаточно, так как нужно еще прописать путь к загруженному шрифту в определенных файлах темы. Также не забывайте менять размер шрифта, именно из-за этого у многих получается кривое меню и другие надписи.
- Sidebar. Очень часто в опциях премиум темы можно встретить пункт «sidebar», который для многих не ясен. Сайдбар это правая или левая боковая колонка. С помощью собственного сайдбара вы можете сделать так, что на одних страницах по боках будет одно, на других — другое. Когда вы создадите собственный sidebar, он появится у вас виде дополнительного виджета, в который вы сможете перенести: последние записи, список ссылок, html код и т. п.
По поводу того, где можно достать premium шаблоны. Конечно все они платные, при чем в плату входит тех обслуживание. К примеру, тех поддержка от разработчика шаблона Duotive включает в себя не только ответы на вопросы, но и сама работа от автора. То есть вам буквально настроят шаблон. Также вы будете иметь доступ к обновлениям шаблона, что немаловажно.
Некоторые wordpress premium шаблоны все-таки можно скачать в интернете, которые выкладывают добрые люди. Ведь не у всех есть деньги на покупку таких дорогих тем. Поэтому желательно найти наиболее свежую версию шаблона.
Пожалуй это все, что я хотел сказать относительно работы с вордпресс темами премиум класса. Надеюсь данные небольшие советы помогут вам создать симпатичный сайт.
Сейчас объясню, как сделать из простого HTML-шаблона тему WordPress на примере дизайна из той статьи.
Адаптировать дизайн под WordPress может понадобиться по многим причинам, например, вы переносите на CMS свой некогда статичный сайт, или вам понравился дизайн, которого в коллекции WordPress ещё нет, или вы просто хотите разобраться, как устроены темы этой CMS изнутри.
Итак, приступим.
Распределяем код по файлам
1. Скачайте шаблон и распакуйте его в папку с темами WordPress (адрес вида адрес_блога_wordpress/wp-content/themes/ ). Если хотите, переименуйте папку с темой на свой вкус. Например, у меня шаблон располагается по адресу адрес_блога_wordpress/wp-content/themes/MyTheme/ .
2. Переименуйте файл styles.css в style.css .
3. Откройте style.css в редакторе кода (таком, как Notepad++) и в самое его начало вставьте следующие строки:
/* Theme Name: MyTheme Theme URI: http://test1.ru Author: NoName Author URI: http://test1.ru Description: Example of test Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */
Как вы могли догадаться, это служебная информация о теме оформления: название, автор, описание, лицензия, версия и т. д. Правые части строк вы можете заменить на собственные, то есть задать свои авторство, версию, описание и прочие данные.
4. Создайте файлы header.php , index.php , sidebar.php , footer.php и распределите по ним код из index.html .
4.1. В header.php скопируйте код по строчку , так как этот файл отвечает за верх сайта. styles.css замените в коде на style.css - новое корректное имя файла.
4.2. В index.php вставьте код основного блока (со строки по строку ).
4.3. В sidebar.php скопируйте код бокового меню (с по ).
4.4. В footer.php вставьте оставшиеся строки (с до конца документа index.html ).
5. Удалите index.html .
6. Перейдите в админ-панель и убедитесь, что шаблон MyTheme появился в разделе Внешний вид -> Темы . Вы даже можете попробовать его просмотреть или активировать, но ничего хорошего из этого пока не получится, ведь шаблон с WordPress мы ещё никак не интегрировали.
Адаптируем header
Теперь мы начнём из статичного шаблона делать динамическую тему, в которую будут подгружаться данные и настройки WordPress.
В шаблоне будут встречаться PHP-вставки. Начинается такой код с . Между ними расположен PHP-код, чаще всего вызывающий функции CMS
1. Откройте файл header.php и замените содержащийся в нём код до блока
на следующий:
>
"> "> " type="text/css" media="screen" />Мы сделали динамическим блок
Код вызывает функцию, возвращающую языковые атрибуты в контейнер.
">
Вместо того, чтобы прописывать кодировку константой, мы вызвали функцию, которая берёт значение из настроек CMS и автоматически подставляет его в код, то есть для смены кодировки уже не придётся править файл темы.
Важная функция, обеспечивающая работу на странице стилей, плагинов и скриптов.
2. Перейдите к редактированию файла index.php. В самом его начале пропишите
,
Строчки вызывают файлы шапки, боковой панели и низа сайта.
Теперь вы можете просмотреть или даже активировать MyTheme. В результате браузер отобразит уже знакомый шаблон со статическим меню и одной-единственной страницей. Чтобы меню стало динамическим и настраиваемым, а вместо одной страницы отображались все помещённые на сайт материалы, нужно преобразовывать шаблон дальше.
Делаем динамическим верхнее меню
Пока мы имеем полностью статическую тему оформления, в том числе и с неизменным горизонтальным верхним меню. Пока его нельзя настроить из админ-панели, и если оставить код в нынешнем виде, то для вставки/удаления/переноса пунктов придётся каждый раз редактировать файл header.php , что крайне неудобно.
Чтобы не мудрствовать лукаво и не погружаться в пучину увлекательного мира программирования, зададим динамическому меню статичное название. Вместо таблицы горизонтального меню вставьте код
так, чтобы получилось следующее:
Для того, чтобы меню стало отображаться, в панели управления сайтом откройте Внешний вид -> Настроить -> Меню и либо переименуйте уже созданное меню в menu, либо создайте меню и настройте его на своё усмотрение, но обязательно присвойте ему имя menu.
Суть действий в том, что файл header.php функцией wp_nav_menu("menu=menu"); открывает меню под названием menu, которое, чтобы отобразиться, должно быть правильно названо и настроено в панели администрирования WordPress. Название menu вы можете поменять на любое другое, главное, чтобы имя совпадало и в настройках сайта, и в коде header.php .
Навигация явно куда-то съезжает, хоть и делает это красивой лесенкой. Так происходит потому, что меню нашего шаблона было неосмотрительно реализовано внутри таблицы, а надо было оформлять его списком. Частично исправить ситуацию можно, добавив в файл style.css следующий код:
#menu ul { margin: 0; /* Обнуляем значение отступов */ padding: 4px; /* Значение полей */ font-size: 18px; } #menu ul li { display: inline; /* Отображать как строчный элемент */ margin-right: 5px; /* Отступ слева */ padding: 3px; /* Поля вокруг текста */ }
Так как он прокомментирован, дополнительные объяснения вряд ли нужны. Остаётся обновить страницу и посмотреть, что список наконец-то стал горизонтальным.
Меню, конечно, можно сделать ровней и красивее, но к адаптации шаблона отношения это действо не имеет, зато крепко связано с CSS, который вы можете подробно изучить.
Завершаем «шапку»
Единственные элементы файла header.php , оставшиеся статическими - имя и описание сайта. Чтобы они брались из настроек, задаваемых в админ-панели, замените отвечающий за вывод текста в шапке код на следующие строки:
Обновите страницу - результат не заставил себя долго ждать.
Работа с файлом header.php на этом завершена, в итоге он имеет следующий код:
>
"> "> " type="text/css" media="screen" />Выводим посты
Переходим к части, содержащей основной контент страницы - редактироваться будет файл index.php .
Удалите содержимое блока right и вместо него вставьте код динамического отображения постов. Либо же удалите из файла весь код и вместо него вставьте следующее:
">
/ /А здесь нет ничего:(404
Начало цикла, благодаря которому страница будет выводить посты, пока они не закончатся.
">
Отображает заголовок поста.
/ /
Дата в формате день, месяц (сокращённо), год. Теги, комментарии.
Вывод поста.
Конец цикла при условии, что записи были.
Если же материалов нет, вывести об этом соответствующую надпись и покинуть цикл.
Вывод постраничной навигации при условии, что на одной они не помещаются.
Простой с виду код глобально изменил страницу - блог стал по-настоящему динамическим. Каждый пост можно посмотреть, ссылки работают.
Дальнейшее оформление и размещение элементов зависит только от вашей фантазии и навыков вёрстки - с отображением данных можно делать всё, что угодно, но работа над шаблоном ещё не завершена.
Добавляем виджеты
Слева от основного контента в шаблоне есть панель, на ней - блок Информация (своего рода виджет) и боковое меню. Информационный блок не должен быть статичен, а так как он очень напоминает виджет, предлагаю виджетом его и сделать. Для этого необходимо:
- зарегистрировать блок виджетов;
- вывести его в нужном месте.
Теперь подробнее.
1. В каталоге темы создайте файл functions.php. В нём хранятся функции, обеспечивающие работу шаблона. Также он может содержать и другие пользовательские процедуры.
2. Внесите в следующий код:
"MySidebar", "before_widget" => "", "after_widget" => "", "before_title" => "
", "after_title" => "
",)); ?>Этот код регистрирует блок виджетов. Вместо MySidebar вы можете вписать любое другое название. Примерно такой же функцией в этом файле можно регистрировать и меню, но я решил обойтись малой кровью и этого не делать, чтобы соприкосновение с PHP сделать минимальным, а заодно и показать два разных подхода к решению одной задачи.
3. В файле sidebar.php сотрите строки:
Информация
Далее...
и вместо них запишите:
Блок Информация ожидаемо исчез, сбоку осталось только пока ещё статическое меню.
4. Зато перемены к лучшему произошли в админ-панели - раздел Внешний вид обзавёлся подпунктами Виджеты и Меню . Перейдите в первый. Откройте его и посмотрите: внутри появился зарегистрированный в файле functions.php блок (у меня это MySidebar).
5. Чтобы воссоздать информационный блок, перетащите на сайдбар виджет Текст , в поле Заголовок введите Информация , в поле Текст - код
Мы предлагаем Вам праздничные скидки. Далее...
6. Обновите страницу блога - блок удалось воссоздать практически один в один (мелкие нюансы меняются в файле style.css и заострять на них внимание я не буду).
Адаптируем меню
Вторая часть боковой панели - вертикальное меню. Его тоже нужно переделать из статического в динамическое, чтобы редактировать затем прямо из админки.
1. Удалите огромный вложенный список меню в файле sidebar.php и вместо него введите код:
2. В панели управления WordPress откройте Внешний вид -> Настроить -> Меню , нажмите кнопку Добавить меню, назовите его так, чтобы имя в админ-панели совпадало с именем в коде страницы sidebar.php (у меня это left_menu ) и добавьте все необходимые пункты.
3. Сохраните изменения, обновите страницу и убедитесь, что динамическое меню левой части сайта работает и отображается правильно.
Код страницы sidebar.php по сравнению с исходным сильно уменьшился и в итоге стал таким:
Меню
Фактически статичной осталась только надпись Меню . И то потому, что меняться вряд ли будет, хотя и её легко можно «оживить», например, реализовав этот блок в виде ещё одной области виджетов и добавив на него блок Произвольное меню, но это, если внимательно читали статью, вы можете теперь легко сделать самостоятельно.
Работаем с файлом footer.php
Файлы шаблонов представляют собой смесь из HTML и PHP, которая может содержать как ваш собственный код, так и вызывать базовую функциональность WordPress. При разработке темы одна из основных задач заключается в том, чтобы исследовать шаблоны родительской темы и отыскать те места, в которых сгенерирована необходимая вам разметка. Для того чтобы быстро и эффективно выполнить данную задачу, нужно обладать некоторыми знаниями относительно того, как работают шаблоны WordPress. Изучением их работы мы и займемся в этом разделе.
В процессе представления страницы, WordPress проверяет наличие соответствующего шаблона в каталоге с активной темой. Каким образом WordPress выбирает необходимый шаблон? Это зависит от типа страницы, а также от количества доступных шаблонов для ее представления. Сначала WordPress выполняет проверку присутствия определенных шаблонов с определенными именами, и если таких не было найдено, то откатывается к файлу index.php, который является своего рода универсальным шаблоном для отображения любой страницы.
Краткая иерархия шаблонов
Главная страница
В WordPress 3.0 администратор блога может определить, что показывать на главной странице: динамический список записей или статическую страницу. Шаблоны WordPress для главной страницы имеют следующую иерархию:
1. front-page.php
2. page.php или home.php (зависит от того, что вы выбрали в настройках блога)
3. index.php
В WordPress 2.x иерархия была следующей:
1. home.php
2. index.php
Отдельные записи
1. single-posttype.php, где posttype задает определенный тип записи. К примеру, если ваша запись имеет название Recipes, то шаблон получил бы название single-recipes.php.
2. single.php
3. index.php
Отдельные страницы
1. WordPress сначала ищет шаблон, определенный в настройках шаблонов страниц.
2. page-slug.php, где slug — это определяющая строка для данной страницы. К примеру, если у вас есть страница, названная About, то WordPress будет искать для нее шаблон page-about.php.
3. page-id.php, где ID — идентификатор данной страницы. Если страница About имеет ID = 2, то WordPress будет искать для нее шаблон page-2.php.
4. page.php
5. index.php
Вложения
1. MIMEtype.php, где MIMEtype определяет тип вложения - к примеру, audio.php, image.php, text.php или video.php.
2. attachment.php
3. index.php
1. category-slug.php, где slug — определяющая строка рубрики.
2. category-id.php, где id — цифровой ID рубрики.
3. category.php
4. archive.php
5. index.php
Архивы меток
1. tag-slug.php.
2. tag-id.php.
3. tag.php
4. archive.php
5. index.php
Архивы таксономий
Произвольные таксономии появились в WordPress 3.
1. taxonomy-taxonomyname-term.php, где taxonomyname является определяющей строкой для произвольной таксономии, а term является термом для данной таксономии. Если ваша таксономия была названа Cheeses и ваш терм был Brie, то WordPress при выводе пунктов для данного терма будет искать шаблон taxonomy-cheese-brie.php.
2. taxonomy-taxonomyname.php, аналогично первому пункту, только без терма.
3. taxonomy.php
4. archive.php
5. index.php
1. author-nicename.php, где nicename — это имя автора, преобразованное в нижний регистр с удаленными пробелами (вместо них ставятся тире).
2. author-id.php, где id — это идентификатор автора.
3. author.php
4. archive.php
5. index.php
Архивы по дате
1. date.php
2. archive.php
3. index.php
Страницы поиска
1. search.php
2. index.php
Страницы 404
1. 404.php
2. index.php
Иерархия шаблонов и дочерние темы
Когда вы используете дочернюю тему, иерархия шаблонов несколько усложняется. WordPress будет искать наиболее подходящий шаблон сначала в дочерней теме, а затем уже в родительской, в строгом соответствии с иерархией. То есть, к примеру, для архивов по дате, сначала WordPress будет искать шаблон date.php в дочерней теме, а затем, в случае его отсутствия, перейдет к поиску данного шаблона в родительской теме. Если же указанный шаблон не был найден, то WordPress перейдет к поиску следующего пункта в иерархии, archive.php. Поиск начнется снова от дочерней темы, и в случае отсутствия шаблона перейдет к родительской. И так далее, до файла index.php.
Шаблоны Thematic
Как мы узнали в предыдущей главе, Thematic является превосходным фреймворком благодаря наличию в нем интересной, мощной функциональности. Для того чтобы лучше понять, как использовать шаблоны данного фреймворка, необходимо потратить некоторое время на изучение их взаимосвязи.
Углубимся снова в папку Thematic. Вы увидите множество различных файлов шаблона, которые, если вы прочли предыдущий раздел, не станут для вас откровенностью:
404.php
archive.php
archives.php
attachment.php
author.php
category.php
comments.php
footer.php
functions.php
header.php
index.php
links.php
page.php
search.php
searchform.php
sidebar-index-bottom.php
sidebar-index-insert.php
sidebar-index-top.php
sidebar-page-bottom.php
sidebar-page-top.php
sidebar-single-bottom.php
sidebar-single-insert.php
sidebar-single-top.php
sidebar-subsidiary.php
sidebar.php
single.php
tag.php
Помимо этого, в папке с Thematic находится интригующий каталог library, в котором содержатся различные стили, языковые файлы, скрипты и т.д. Наиболее интересным подкаталогом данного каталога является extensions — в нем содержатся различные расширения для Thematic. Вот список файлов, расположенных в папке extensions:
comments-extensions.php
content-extensions.php
discussion.php
dynamic-classes.php
footer-extensions.php
header-extensions.php
helpers.php
shortcodes.php
sidebar-extensions.php
theme-options.php
widgets-extensions.php
widgets.php
Название каждого из этих файлов содержит в себе ключ к разгадке того, что они выполняют. Sidebar-extensions.php, очевидно, совершает какие-то действия с сайдбаром, widgets-extensions.php — с виджетами и т.д.
Создать шаблон для WordPress проще, чем можно подумать. Для этого не надо обладать огромным опытом разработки дизайна или программирования сайтов. В этой статье расскажем об основах создания с нуля собственных тем WordPress.
Зачем вообще может понадобиться создание собственного шаблона WordPress, когда можно воспользоваться имеющимися в базе заготовками? Вот какие причины могут подтолкнуть к этому:
- Можно получить уникальный сайт или лэндинг, отличный от конкурентов. Учитывая миллионы блогов, построенных на этой CMS, каждый типовой дизайн используется как минимум сотню раз.
- Полная свобода действий на этапе разработки. Можно добавлять собственный функционал с нужными именно вам рабочими элементами.
- Можно применять разные дизайны для разных разделов сайта, что невозможно при использовании готового шаблона.
- Можно сделать несколько видов и предоставить посетителям возможность переключаться между разными темами, что повысит интерес и лояльность к веб-ресурсу.
- Простота работы на Вордпресс делает ее доступной для многих (в помощь будут видео-уроки в интернете). А значит, собственноручная разработка главной или создание дочерней темы позволит сэкономить деньги на привлечении сторонних дизайнеров и программистов.
- Можно воспользоваться возможностью дочерних тем – когда корректировки вносятся в дублеры таблицы стилей style.css, а главный файл при этом остается нетронутым. Это позволяет быстро отменить изменения, если они окажутся неудачными, а также не терять наработки при обновлении основной темы.
Краткая инструкция
Конечно, пройти полное обучение тому, как создать шаблон страницы, с помощью одной статьи не получится. Для начала важно понять основы – как делаются самые простые темы. На основе них уже можно заняться «творчеством» и создать лэндинг или сайт по своим желаниям. Сейчас дадим вам краткую шпаргалку с поэтапными инструкциями – она поможет понять, как происходит создание сайта.
Шаг первый: подготовительные работы
Перед началом работ надо убедиться, что у вас есть текстовый редактор (самым простым является Блокнот или Nodepad++, тем более скачать их можно бесплатно). Следующий шаг – установка движка WordPress и набора Denwer на локальный компьютер. Денвер – это пакет важных инструментов для программистов. С помощью них значительно облегчается и ускоряется процесс разработки и внесения изменения сайтов. Как его устанавливать, подскажет это видео:
Шаг второй: создают папку новой темы
Переходим в нужную директорию. Она чаще всего имеет следующий путь: . Здесь хранятся все темы – и стандартные, и произвольные. Заходим в нее создаем новую папку. Называем ее, например, «MyFirstTheme».
Теперь переходим в новую папку и обязательно добавляем два файла, сделанных через Nodepad++ или другой редактор. Это index.php и style.css. Пока эти документы пусть останутся пустыми, потом мы еще займемся их наполнением. Еще добавьте в «MyFirstTheme» сюда папку images. куда можно будет добавлять картинки для оформления шаблона.
В последствии в «MyFirstTheme» можно добавлять шаблоны для отдельных частей сайта: боковой панели (sidebar.php), сайта (header.php), записей на страничках (single.php), комментариев (comments.php) и пр. Набор дополнительных файлов зависит от структуры, которую вы запланируете для своего веб-ресурса.
Шаг третий: наполнение index.php
Первое, что надо сделать – заполнить индексный файл (index.php). Вот пример самого простого кода, по которому у сайта будет четыре области: header, main, sidebar и footer.
Site Title
В файле можно прописать любые элементы, которые вы хотите видеть у себя на сайте. Больше информации о прописывании кода index.php для создания тем в WordPress можно получить из видео:
Шаг четвертый: заполняем и style.css
Теперь надо открыть style.css, добавить и заполнить следующие поля (вписать вместо *** собственную информацию о сайте и владельце). Введенные данные будут отображаться в админке.
/*Theme Name: ***
Theme URI: http:// ***
Author URI: http:// ***
Description: ***
В последствии в этот файл можно будет вводить разные данные и правила, определяющие внешний облик страниц. Например:
(информация в /**/ — это комментарии, а не части кода)
На данном этапе пока рано задавать строгие параметры стилей, но при дальнейшей работе с файлом вам пригодится этот видеоурок:
Шаг пятый: разбиваем файлы
Все элементы, указанные в index.php следует продублировать отдельными файлами. В шаге первом в примере помимо главной части main были указаны header, sidebar и footer – следовательно, для них создаем свои документы в формате.php.
Например, создаем файл header.php, открываем index.php. находим соответствующий участок кода и вставляем его в новый файл. Это будет:
Site Title
Тоже самое проделывается для остальных частей. Это надо сделать для более легкой навигации. Когда элементов будущего сайта будет много, то отдельные файлы помогут лучше ориентироваться для проверки или внесения изменений.
Чтобы главный индексный файл был согласован с дополнительными, в index.php под блоками для каждой части надо прописать следующее:
Ниже приведен список стандартных файлов шаблонов, используемых WordPress. Их можно не использовать или добавлять свои разделы:
- Header – стиль шапки вашего сайта.
- Comments – шаблон для создания комментариев.
- Home – тема для главной страницы.
- Page — определяет тему, если создадите отдельные странички на сайте
- Category – шаблон для разбивки на категории
- Date – определяет стиль вывода даты-времени.
- Archive – шаблон для архивного раздела со старыми материалами.
- Search – файл, в котором указываются параметры для поиска на сайте.
- 404 — шаблон для страницы, на которой сообщается об ошибке 404 Not Found.
- Footer – определяет стиль подвала вашего сайта.
Когда впоследствии вы будете дорабатывать каждый элемент, понадобится наглядный видеоурок. Вот несколько подборок, которые могут вам помочь:
Шапка в header.php:
Добавление контента:
Стилизация комментариев:
Подвал на сайте:
Как можно вносить изменения без опасений
Когда надо вносить изменения на страницы сайта, то есть риск что-то неправильно прописать и не суметь «откатить» назад. Также может случиться так, что внесения в таблицу стилей исчезнут при обновлении главной темы.
Чтобы этого не произошло, можно создать дочернюю тему WordPress (подтему) – это дублер файла стилей style.css, не затрагивающий главный файл (изменения в одном не отменяют обновления в другом).
Создание дочерней темы WordPress не составит никакого труда. Надо сделать новую папку в основном каталоге C:\WebServers\home\localhost\www\НАЗВАНИЕ_ЗАДАННОЕ_ПРИ_УСТАНОВКЕ\wp-content\themes . В новой папке делаем свой файл style.css с вот таким содержимым:
Theme Name: НАЗВАНИЕ ТЕМЫ
Template: НАЗВАНИЕ ПАПКИ В ДОЧЕРНЕЙ ТЕМОЙ
Theme URI: ЗАПОЛНИТЬ
Description: ЗАПОЛНИТЬ
Author URI: ЗАПОЛНИТЬ
/* импортируем стили родительской темы */
@import url(«../НАЗВАНИЕ/style.css»);
/* Свои дополнительные стили */
Foo{ color:red; }
Теперь можно в админке зайти во «Внешний вид›Темы» и активировать дочерний шаблон. В дальнейшем можно работать в новом файле. В дополнение небольшая видео-презентация на тему дочерних шаблонов:
Вордпресс — самый простой из всех возможных движков, с которым управится и человек с высшим образованием, и школьник, который еще не окончил девяти классов. Но все новое изначально может даваться с трудностями, потому рекомендуем тщательно прочесть данное знакомство с движком для чайников. Приведенная статья не описывает весь процесс создания сайта, но объясняет как , как быстро научиться управлять движком.
Где находится управление движком
Чтобы внести какие-то изменения на сайт, вам необходимо зайти в административную панель. Она находится сверху. Для авторизации нужно ввести логин и пароль. Можно использовать стандартную учетную запись admin, но лучше в дальнейшем ее удалить — чтобы сайт не взломали.
В «админке» (разговорное сокращение названия административной панели) содержатся все доступные функции вашего движка.
Вы сможете изменять внешний вид сайта, добавлять и удалять виджеты, публиковать материалы, а также работать с плагинами. Все это можно и нужно делать через админку Вордпресс.
После того, как вы сделали первые шаги для изменения сайта (или хотя бы ), просмотрите изменения. В админпанели есть пункт «Просмотр сайта». Чтобы научиться пользоваться движком, рекомендуется прежде хорошо изучить структуру сайта, обратить внимание на каждый доступный элемент в стандартной теме Вордпресс. Когда вы научитесь видеть картину в целом, пользоваться движком уже будет не так сложно.
Из чего состоит сайт Вордпресс
То, как выглядит ваш сайт в данный момент — это отображение установленной темы (или шаблона). Тему можно скачать либо создать самостоятельно (это работа не для чайников). Каркас шаблона состоит из нескольких частей: шапки сайта (header), основной части и чердака (подвал, футер и т. д.). Основная часть страницы также делится на сайдбары (боковые колонки) и основу, где размещается контент.
Также обратите внимание на структуру постов. Они состоят из заголовка (названия статьи), основной части (текста поста), а также имеют мета-данные. Эти мета-данные (теги) нужно научиться заполнять, так как от качества их наполнения будет зависеть количество посетителей на вашем ресурсе. Кроме этого, в посте может быть указан автор статьи, время публикации, тэги (не мета-теги, а метки) и категория, в которой расположен материал.
Если вы пролистаете сайт в самый низ, то опуститесь в его подвал. Там можно увидеть какие-то надписи от разработчиков шаблона, виджеты, календари, категории и панель навигации. Со временем вы научитесь редактировать каждый из указанных элементов.
Как редактировать сайт Вордпресс
У вас есть несколько вариантов как изменять структуру сайта. Первый и самый сложный вариант — это ручная редактура страниц. Можно самостоятельно написать код для стиля страниц сайта. Для этого воспользуйтесь интернет-ресурсами, посвященными программированию. Учтите, что для добавления своего кода на движок Вордпресс его нужно адаптировать под потребности этой платформы — перед активацией html-элементов переделайте файлы в php формат с изменением кода. Заниматься таким со старта знакомства с движком можно, но есть ли смысл? Лучше начните с более легких методов.
Стандартное вполне подходит для элементарной редактуры сайта. Вы сможете настроить «Внешний вид» (название раздела меню), добавить «Виджеты», а также отредактировать оформление постов как вам угодно. Но только за счет стандартных возможностей у вас не получится сделать веб-шедевр. С обычными параметрами редактуры можно сделать сносный сайт, но он не будет функциональным.
Чтобы сделать из вашего интернет-проекта уникальный веб-ресурс, необходимо докачивать на движок Вордпресс плагины. Это специальные модули, которые расширяют функции движка. С ними можно создать личные кабинеты для пользователей, особые виджеты и калькуляторы, анимации в шапке сайта, удобные плеера и даже кнопки для листания страниц. И, что самое главное, большинство плагинов доступны в бесплатной версии для скачивания. Вам понадобится лишь скачать их, добавить на движок через вкладку «Плагины» в меню Вордпресс, и активировать. Обычно, плагинами легко управлять, также как и самим движком.
Чтобы редактировать сайт Вордпресс обязательно быть в Интернете
Нет, не обязательно! Можно вносить важные изменения и без Интернета. но для этого вам понадобится перенести базы данных на локальный хостинг. Локальный сервер — это ваш компьютер. Ведь чтобы управлять содержимым сайта, нужно иметь доступ к его базам данных. Обычно сайт помещают на посторонний хостинг. И чтобы им управлять в таком случае, необходимо подключиться к Интернету для получения информации с другого сайта. А локальный хостинг — это ваше «железо», потому никуда подключаться не нужно.
За сколько можно научиться работе с Вордпрессом
Пожалуй, это самый популярный вопрос среди новичков. Все любят планировать. Тем более, мотивация гораздо выше, когда есть определенные сроки, за которые можно изучить новую сферу. Можно уверенно заявить, что новичок сможет освоиться с работой движка за несколько дней. За это время он успеет понять структуру сайта, а также то, как менять основные параметры ресурса.
А вот сколько нужно времени, чтобы научиться делать шаблоны для Вордпресс и создавать функции при помощи кода — это уже индивидуальный вопрос. У одного на это может уйти несколько лет, другой справиться за полгода. Все зависит от вас, вашего желания и количества свободного времени. Рекомендуется побольше читать статей о WordPress, пробовать все на личном опыте и задавать как можно больше вопросов на форумах и у знающих знакомых. Тогда вы точно сможете управиться с этим движком!