Category Archive Темы WordPress

Автор:human

Как создать шаблон для WordPress используя Bootstrap. Часть 5

Приветствую подписчиков, и тех, кто ждет продолжения уроков по созданию шаблона для wordpress используя bootstrap. В данном уроке, мы распределим код по файлам single.php, page.php, archive.php, 404.php и внедрим пагинацию (навигация по страницам) в наш шаблон.

Поправка

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

В файле index.php

  • Исправим класс span7 на span8
  • Исправим класс span3 на span4
  • Исправим класс row (который перед span7) на row-fluid

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

Bootstrap пагинация для WordPress

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

/* Пагинация */
function bootstrap_pagination($pages = '', $range = 2)
{
$showitems = ($range * 2)+1;
global $paged;
if(empty($paged)) $paged = 1;
if($pages == '')
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}
if(1 != $pages)
{
echo "<div class='pagination pagination-centered'><ul>";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link(1)."'>&laquo;</a></li>";
if($paged > 1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a></li>";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<li class='active'><span class='current'>".$i."</span></li>":"<li><a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a></li>";
}
}
if ($paged < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($paged + 1)."'>&rsaquo;</a></li>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($pages)."'>&raquo;</a></li>";
echo "</ul></div>\n";
}
}
/* Пагинация */

В файл index.php, вставляем код после закрытия тега </div>, который относиться к row-fluid.

<?php bootstrap_pagination();?>

Использование bootstrap pagination в wordpress

После чего, чтобы увидеть заработала она или нет, нужно зайти в “Настройки” – “Чтение” и в пункте “На страницах блога отображать не более”, выставить значение 1 или 2. Далее, нужно добавить еще одну запись, после чего, вы увидите примерно такую картину.

Twitter Bootstrap пагинация (навигация по страницам)

Когда вы убедились в том, что всё работает, не забудьте, обратно выставить нужное количество отображаемых записей на странице (Стандартно 10).

Распределяем код по файлам

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

Редактируем основные файлы
  • Копируем содержимое файла index.php
  • Вставляем в category.php, archive.php

Внимание! Если вы хотите, чтобы в категориях и в архиве выводились краткие записи, замените <?php the_content(); ?>, на <?php the_excerpt(); ?>.

Редактируем файл выдачи результатов поиска.
  • Копируем содержимое index.php
  • Вставляем в файл search.php
  • Перед циклом <?php if ( have_posts() ) …. вставляем <h4>Результаты поиска</h4>
  • Между <?php endwhile; ?> и <?php endif; ?> вставляем нижеприведенный код
1
2
3
<?php else : ?>
<p>По вашему запросу ничего не найдено, предлагаем вам воспользоваться поиском по сайту.</p>
<?php get_search_form(); ?>
  • Сохраняем содержимое файла и копируем
  • Вставляем в файл tag.php
  • Текст который в <p> или <h4>, можно изменить на свое усмотрение
Переходим к следующим файлам, для этого нужно внести маленькую правку.
  • Копируем содержимое index.php
  • Вставляем в single.php, после чего, нужно удалить цикл. Для этого, удаляем while ( have_posts() ) : и <?php endwhile; ?>. 
  • Удаляем строчку <?php bootstrap_pagination();?>, только после этого сохраняем файл.
  • Вставляем в page.php содержимое single.php, в котором мы удалили цикл.

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

Внимание! Если у вас при открытии записи сбилась кодировка, переобразуйте ее в “UTF8 без BOM’ с помощью notepad++.

Редактируем файл, который выдает ошибку 404.
  • Откроем файл 404.php
  • Вставим в него содержимое single.php
  • Удалите <div class=”content”> со всем его содержимым
  • Замените на нижеприведенный код
1
2
3
4
5
6
7
<div class="content">
<a href="<?php the_permalink();?>"><h2><?php the_title(); ?></h2></a>
<div class="custom"><?php the_date(); ?> опубликовал <strong><?php the_author(); ?></strong> в рубрике <?php the_category(); ?></div>
<?php the_content(); ?>
<a href="<?php the_permalink(); ?>">Читать далее</a>
</div>

Наш урок подошел к концу, как обычно, если вам понравился урок, не забываем делиться в социальных сетях, каждое ваше нажатие “Мне нравиться”, “Рассказать друзьям” греет мне душу и мотивирует чаще делиться с вами интересной информацией. В следующем уроке мы доделаем страницу single.php, внедрим комментарии, а также откорректируем сайдбар.

 

Автор:human

Создание адаптивного шаблона для wordpress. Часть 3

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

Создаем шаблон для wordpress

1. Создаем навигацию


– Первое что нам понадобиться это небольшой скрипт под названием wp-bootstrap-navwalker который делает совместимость навигации bootstrap и wordpress. Скачать скрипт можно с github, после чего файл wp-bootstrap-navwalker.php поместите в корень нашего сайта (Туда где файлы index.php, single.php и другие)

– Следующим этапом в создании навигации будет подключение нужных строк в файле functions.php который мы создавали в прошлом уроке по созданию шаблона для wordpress.

<?php
 require_once('wp_bootstrap_navwalker.php');
 if (function_exists('add_theme_support')) {
 add_theme_support('menus');
 }
?>

Данный скрипт подключает тот самый скрипт который мы скачали с github и включает возможность созданию меню через админ панель.

– Открываем header.php и прописываем код который будет выводить наше навигационное меню. Код прописываем внутрь тегов <menu></menu>

<?php
 wp_nav_menu( array(
 'menu' => 'headMenu',
 'depth' => 2,
 'container' => false,
 'menu_class' => 'nav',
 'walker' => new wp_bootstrap_navwalker())
 );
 ?>

– После чего в файл style.css прописываем, сброс отступов для тега <menu>

menu {
 padding:0;
 margin:0;
 }

– Откроем файл footer.php и пропишем jquery код который будет добавлять класс .active в навигацию. Прописываем данный скрипт после подключения jquery

<script>
 jQuery(document).ready(function () {
 $(".current-menu-item").addClass("active");
 });
 </script>

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

Создание навигации для wordpress

1. Тут прописываем имя нашего меню, которое мы прописывали в файле header.php в строчке ‘menu’ => ‘headMenu‘ где headMenu это название которое мы вводим в пункте 1 (на скриншоте), у вас название может быть другое.

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

3. После проделанных манипуляций сохраняем наше меню.

– Наше меню создано вот как оно должно выглядеть в итоге

Меню для wordpress используя bootstrep

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

2. Вывод контента


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

– Открываем файл index.php и вместо надписи Тест контент которая находиться внутри блока <div class=”span7″></div> прописываем обязательную функцию цикла, внутри которой мы будем формировать будущий вид записи.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
//Тут будет код записи
<?php endwhile; ?><?php endif; ?>

– Выводим заголовок записи wordpress. Для этого вместо надписи //Тут будет код записи прописываем

<a href="<?php the_permalink();?>"><h2><?php the_title(); ?></h2></a>

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

1
<div class="custom"><?php the_date(); ?> опубликовал <strong><?php the_author(); ?></strong> в рубрике <?php the_category(); ?></div>

– Оформляем вид вывода информации о записи, для этого откроем style.css и пропишем код

/* Формируем запись */
 .custom {
 font-size: 13px;
 color: grey;
 padding-bottom: 5px;
 margin-bottom: 20px;
 border-bottom: 1px solid #EEE;
 }
 .custom ul {
 list-style: none;
 display: inline-block;
 margin: 0;
 }
 /* Конец формирования записи */

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

<?php the_content(); ?>
 <a href="<?php the_permalink(); ?>">Читать далее</a>

В итоге мы должны получить примерно вот такую картину, если вы владеете хотя бы базовыми знаниями css и html, вы могли оформить вид новости иначе. Моя задача в том чтобы показать наглядный и простой пример, как сделать шаблон для wordpress используя twitter bootstrep.

Превью шаблоня для wordpress

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

Автор:human

Создание адаптивного шаблона для wordpress cms. 4 часть

Всем привет, в прошлом уроке мы с вами научились выводить меню посредством wordpress и bootstrap navbar, а также вывели основной контент сайта (краткая запись). В данном уроке мы продолжим формировать структуру нашего шаблон для wordpress основанного на фреймворке Twitter Bootstrap.

Приступим к выводу сайдбара на wordpress. Сайдбар на вордпрессе можно выводить двумя способами, просто создав в корне файл sidebar.php и выводить его в нужном месте с помощью тега get_sidebar(). Или же выводить с помощью зарегистрированного сайдбара в системе присваивая ему имя. В последнем варианте, вы можете использовать несколько сайдбаров одновременно, управляя им через админку. Мы же будем использовать второй вариант, с внедрением в первый, в конце урока объясню почему.

1. Регистрация Sidebar

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

1
2
3
4
5
6
7
8
9
10
11
12
function register_my_widgets(){
register_sidebar( array(
'name' => "Правая боковая панель сайта",
'id' => 'right-sidebar',
'description' => 'Эти виджеты будут показаны с правой колонке сайта',
'before_widget' => '<li class="homepage-widget-block">',
'after_widget' => '</li>',
'before_title' => '<h1>',
'after_title' => '</h1>'
) );
}
add_action( 'widgets_init', 'register_my_widgets' );

Давайте рассмотрим подробнее код, самая важная строчка

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

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

Пример отображения сайдбара в админ панеле

Данные о сайдбаре можно посмотреть в пункте Внешний вид – Виджеты (файл functions.php.php должен быть уже отредактирован с регистрацией sidebar, иначе вы не увидите данное окошко)

Текст указанный красной строчкой указывается в строчке name которую мы рассматривали выше.

2. Вывод Sidebar в шаблон

На самом деле существует два варианта вывода, с помощью файла sidebar-name.php указав имя (идентификатор сайдбара), и с помощью функции dynamic_sidebar(‘name’);  Мы воспользуемся вторым методом.

Открываем файл sidebar.php и вставляем внутри тега <aside></aside> (html5 тег, необязательный) функцию вывода.

В лапках right-sidebar, это идентификатор который мы указывали в первом пункте, при регистрации виджет панели.

Еще можно данный код приписывать сразу в index.php, singel.php и т.д. Но метод который использую я, облегчит редактирование в будущем, например когда вы захотите изменить идентификатор сайдбара, вам не нужно будет редактировать его во всех файлах, будет достаточно изменить его только в sidebar.php

3. Вставка виджетов в сайдбар

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

Как добавить виджет в сайдбар

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

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

Хочу обратить ваше внимание, что это уроки по созданию структуры шаблона на twitter boostrap, поэтому особого дизайна в шаблоне не будет, постараюсь привести шаблон в эстетический вид. 

Ну вот и подошел наш очередной урок к концу, в следующем уроке мы создадим pagenavi на основе bootstrap pagination, распределим код по всем основным файлам, и понемногу приблизимся к адаптивному дизайну. Прошу прощения за то что длительное время не писал на сайт, обещаю исправиться :)

Автор:human

Создание адаптивного шаблона для wordpress CMS. 2 часть

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

Как создать шаблон WordPress

1. Основные файлы шаблона для WordPress (Структура шаблона)


Страница шаблона будет разбита на четыре файла:

header.php отвечает за шапку нашего сайта, включает в себя тег <hrad></head>

index.php выводит основной контент сайта

sidebar.php Тут все понятно, файл отвечает за сайдбар (боковая панель) сайта.

footer.php Ну и в заключение подвал сайта

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

style.css Файл стилей, который в обязательном порядке находится в корне шаблона

functions.php Мозг вашего WordPress, системный файл настройки CMS

– 404.php Файл шаблона который в будущем будет выводить страницу ошибки 404.

page.php файл который отвечает за вывод страниц, например “О сайте”

single.php Вывод полной новости

– search.php Вывод результатов поиска

– searchform.php Все манипуляции с формой поиска проделываются в этом файле

archive.php Выводи архив блога

comments.php Данный файл отвечает за вид комментариев

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

Структура шаблона WordPress

2. Переносим наш шаблон в папку шаблонов WordPress


  • Переходим в wp-contentthemes
  • Копируем туда наш шаблон, у себя я его назвал web

Советую для тех кто не знает как установить wordpress прочитать стать. как установить wordpress на хостинг, или посмотреть видео в конце статьи.

3. Идентифицируем шаблон


Откроем файл style.css и в самом начале вставит код

1
2
3
4
5
6
7
8
/*
Theme Name: Rose
Theme URI: домашняя-страница-темы
Description: краткое-описание-темы
Author: ваше-имя
Author URI: ваш-URI
Version: номер-версии--необязательное-поле
*/

Заполним все поля

  • Theme Name имя вашего шаблона
  • Theme URI ссылка на шаблон где вы его продаете или распространяете, если вы делаете шаблон для себя, укажите домен вашего сайта
  • Description краткое описание шаблона
  • Author ваше имя или никнейм
  • Author URI ссылка на страницу где с вами можно связаться
  • Version версия вашего шаблона

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

4. Активация шаблона


  • Откроем админ панель нашего wordpress для этого перейдем по адресу https://ваш-адрес/wp-admin
  • Переходим в Внешний видТемы
  • Находим наш шаблон и активируем (на данный момент он пока без миниатюры)

Активация шаблона WordPress

5. Прописываем путь к папке с шаблоном


Как вы заметили после активации шаблона, наш набросок перестал корректно отображаться. Это все потому что в строках где подключаются css и js файлы нужно прописать корректный путь к шаблону. Разработчики WordPress для этого предлагают нам использовать функцию <?php echo get_template_directory_uri(); ?>, но я вам советую прописывать полный путь так как каждый раз когда вы используете функцию определения пути к шаблону, отправляется лишний запрос, от чего производительность сайта ухудшается. Напомню что поисковики плохо относятся к сайтам которые медленно загружаются. Поэтому оптимизируйте ваш шаблон на ранних этапах.

Вот как должна выглядеть строчка подключения с использованием функции от wordpress

1
<link href="<?php echo get_template_directory_uri(); ?>/style.css" rel="stylesheet">

Вот как я рекомендую, web заменяем названием папки вашего шаблона

1
<link href="https://ваш-сайт/wp-content/themes/web/style.css" rel="stylesheet">

И так заменяем 5 строчек , 3 строчки подключения стилей в начале шаблона, одна  html5shiv подключение скрипта для IE и одна строчка подключения скрипта в конце.

6. Разделяем index.php на файлы header, sidebar, footer


Работа с файлом header.php

  • Открываем наш index.php файл
  • Выделяем кусок кода от начала файла до закрывающего html5 тега </header>
  • Вырезаем выделенный фрагмент кода, и копируем в файл header.php
  • На место вырезанного фрагмента из файла index.php ставим код вызова файла header.php <?php get_header(); ?>
  • В файле header.php перед закрывающим тегом </head> вставьте код <?php wp_head(); ?> он отвечает за вызов стилей и скриптов плагинов.

Работа с файлом sidebar.php

  • В файла index.php вырезаем все тег <aside> и все что внутри
  • Вставляем вырезанный фрагмент в файл sidebar.php
  • На место вырезанного кода прописываем <?php get_sidebar(); ?>

Работа с файлом footer.php

  • В файле index.php вырезаем кусок кода от начал тега <footer> до конца файла
  • Вставляем вырезанный фрагмент в файл footer.php
  • Вместо вырезанного кода из первого пункта ставим код вызова <?php get_footer(); ?>

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