Category Archive Темы WordPress

Автор:human

Верстка wordpress — работаем с темой от roots.io — sagemaster

Для начала установим nodejs через nvm. Ставить будем версию 7.1.0. Делается это в пару команд.

Далее идем в каталог с вашим сайтом в папку wp-content/themes
Клонируем репу в папку itclifesagemaster

Ok. Идем далее
Устанавливаем composer в каталоге с темой

Автор:human

25 лучших бесплатных шаблонов для WordPress на Bootstrap Framework 2015

 

Sparkling

sparkling - the best bootstrap theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Activello

activello-free-wordpress-blog-theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Dazzling

Dazzling - Free Bootstrap Business template

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Unite

Unite - Wedding theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Zerif Lite

Zerif Lite is a clean and modern one page WordPress Bootstrap theme well suited for web agencies, digital studios, corporate, product showcase, personal and business portfolio. Zerif Lite is optimized to support many popular WordPress plugins such as WooCommerce for eCommerce and WPML plugin to create multilingual WordPress website. This theme is SEO friendly, optimized for all mobile devices and features a clean W3C validated markup.

zerif lite - corporate theme

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Inkness

inkness WordPress portfolio theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Fullby

Fullby WordPress theme

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

WP Knowledge Base Theme

WP Knowledge Base Theme

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Arcade Basic

Arcade Lite - Bootstrap -theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

StanleyWP

StanleyWP personal blog theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Rokophoto Lite

rokophoto-lite-wordpress-theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

GovPress

GovPress WordPress theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Romangie

Romangie - blog theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Blain

blain WordPress blog theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Adament

adament WordPress photography theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Revera

Revera WordPress theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Flat Theme

Flat - Corporate Bootstrap theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Nova Lite

Nova Lite WordPress grid theme

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Wembley

Wembley - Free Portfolio Theme

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Flat

flat-boostrap-blog-theme

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Vanguard

Vangard - Free Blog Theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Ward

ward-bootstrap-business-theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Simple Business Theme

Simple Business Theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Soliloquy Theme

Soliloquy - free wp theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Customizr

Customize - Free Boostrap theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

MERIS

Meris - free portfolio theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Virtue

virtue - free bootstrap business theme

 

БОЛЬШЕ ИНФЫ / СКАЧАТЬ ДЕМО

Автор:human

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

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

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

Принцип адаптации

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

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

@media (max-width: 700px) {
.first-div{
background:red;
}
.second-div{
background:blue;
}
}

Рассмотрим данный пример, в первой строке мы указываем, что медиазпрос работает с размерами браузера (экрана) до 700px, во второй и третей прописывается стандартный css. Вы можете использовать несколько условий внутри одного медиазапроса.

Приступим к работе над шаблоном

Для начала нам понадобиться создаться файл media.css внутри папки css. После чего в header.phpподключаем данный файл прописав:

1
<link href="https://ВАШ-САЙТ/wp-content/themes/ВАШЕ-НАЗВАНИЕ-ТЕМЫ/css/media.css" rel="stylesheet">

Измените адрес вашего сайта, и название темы.

Редактирование файла media.css

Открываем файл media.css и вставляем внутри него:

@media (max-width: 767px) {
.span4 {
 display:none!important;
}
}

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

Давайте первым делом добавим поисковую форму в код. Откроем файл header.php  и после строчки “<a class=”brand” href=”#”>Имя сайта</a>” вставим “<?php get_search_form(); ?>” (без кавычек). После чего добавим пару строк в файл style.css

.navbar .searchform {
margin: 0;
padding-top: 4px;
}
.navbar .screen-reader-text {
display:none;
}
.navbar input {
margin:0!important;
}

Данным кодом мы отключим надпись “найти”, и выровняем input в одну линию.

На данном этапе нам нужно отключит отображение поиска для больших экранов, для этого в файле media.css вставляем:

@media (min-width: 767px) {
.navbar .searchform {
 display:none!important;
}
}

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

@media (max-width: 500px) {
.navbar .searchform #s {
width: 120px;
}
}

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

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

header {
padding-bottom:20px!important;
}

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

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

Автор:human

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

Страница single.php выводит полную запись WordPress. В данном уроке, приведем данную страницу в нужный вид и добавим в нее комментарии. А так же, как я и обещал в прошлом уроке по созданию адаптивного шаблона для wordpress, мы внесем корректировки в файл сайдбара.

Начну с поправок, боюсь чтобы это не стало традицией :) Нужно удалить нижеприведенный код из файлов single.php и page.php

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

Еще как гласит WordPress кодекс, нужно вставить обязательные css стили в ваш файл стилей, для этого вставьте их в файл style.css

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}
.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}
.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}
.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}
a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}
a img.alignnone {
    margin: 5px 20px 20px 0;
}
a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}
a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}
.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}
.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}
.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}
.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

1. Редактируем single.php

Первое что нужно сделать, это вставить код вывода тегов. Данный шаг не является обязательным, все зависит от ваших предпочтений, но раз уж эта функция есть в WordPress, то давайте будем ею пользоваться. Для этого вставьте код в sigle.php после <?php the_content() ;?>

1
<div class="tags"><?php the_tags(); ?></div>

Сохранив файл, добавьте стили в файл style.css

.tags {
padding-bottom: 5px;
margin-top: 20px;
}

2. Добавляем комментарии

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

<?php
// ########## Не удаляйте данные стоки
if (isset($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])){
 die ('Please do not load this page directly. Thanks!'); }
if ( post_password_required() ) { ?>
 <p class="nocomments"><?php _e('Этот пост защищен паролем. Введите пароль для просмотра комментариев.', 'kubrick'); ?></p>
<?php
 return; }
// ########## Конец секции
// Отображение комментариев
if ( have_comments() ) : ?>
 <h4 id="comments"><?php comments_number('Нет комментариев', 'Один комментарий', '% Комментариев');?> <?php printf('для “%s”', the_title('', '', false)); ?></h4>
 <div class="navigation">
 <div class="alignleft"><?php previous_comments_link() ?></div>
 <div class="alignright"><?php next_comments_link() ?></div>
 </div>
 <ol class="commentlist">
 <?php
 wp_list_comments(array(
 // see https://codex.wordpress.org/Function_Reference/wp_list_comments
 // 'login_text' => 'Login to reply',
 // 'callback' => null,
 // 'end-callback' => null,
 // 'type' => 'all',
 // 'avatar_size' => 32,
 // 'reverse_top_level' => null,
 // 'reverse_children' =>
 ));
 ?>
 </ol>
 <div class="navigation">
 <div class="alignleft"><?php previous_comments_link() ?></div>
 <div class="alignright"><?php next_comments_link() ?></div>
 </div>
 <?php
 if ( ! comments_open() ) : // There are comments but comments are now closed
 echo"<p class='nocomments'>Комментарии закрыты.</p>";
 endif;
else : // I.E. There are no Comments
 if ( comments_open() ) : // Comments are open, but there are none yet
 // echo"<p>Be the first to write a comment.</p>";
 else : // comments are closed
 echo"<p class='nocomments'>Комментарии закрыты.</p>";
 endif;
endif;
comment_form(array(
 // see codex https://codex.wordpress.org/Function_Reference/comment_form for default values
 // tutorial here https://blogaliving.com/wordpress-adding-comment_form-theme/
 'comment_field' => '<p><textarea style="height:130px; width:auto;" name="comment" id="comment" cols="58" rows="10" tabindex="4" aria-required="true"></textarea></p>',
 'label_submit' => 'Отправить',
 'comment_notes_after' => ''
 ));
?>

– В файле single.php вставьте код, после тегов (the_tags), которые мы вставляли выше.

1
<?php comments_template( '', true ); ?>

– В файле footer.php, после </script> вставляем код, который подключит класс btn для нашей кнопки самбит. Данный класс даст нормальный вид кнопке.

<script>
jQuery(document).ready(function($) {
$('input#submit').addClass('btn');
$('input#searchsubmit').addClass('btn');
});
</script>

– И чтобы комментарии выглядели лучше, в файл style.css вставляем код

/* Комментарии */
#comments {
margin: 25px 0 15px 0;
}
.comment-meta {
margin: 8px 0;
}
.comment {
margin: 10px 0;
}
#reply-title {
font-size: 17.5px;
margin:10px 0;
}
/* Конец комментарии */

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

Wordpress форма комментариев

 

3. Корректируем сайдбар

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

/* Сайдабр */
.homepage-widget-block {
list-style:none;
border-bottom: 1px dashed #C2C2C2;
padding-bottom: 20px;
}
.homepage-widget-block form, .homepage-widget-block #searchform div input {
margin:0;
}
.homepage-widget-block h1 {
font-size: 18px;
text-transform: uppercase;
}
/* Конец сайдбар */

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