• ×

    • WordPress. Как создать шаблон страницы. Создание простой темы для WordPress

    08.08.2019

    Допустим, мы открыли новую и пока пустую презентацию в Powerpoint. И что мы видим?

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

    И 1-й слайд в вашей презентации автоматически будет выглядеть, например, так ВСЕГДА без дальнейших усилий.


    Шаблон включает в себя:

    • Цвета
    • Шрифты
    • Заполнители (разделы, где мы вставляем текст, изображение, диаграмму и т.п.)

    Ниже вы найдете пошаговую инструкцию для создания собственного шаблона в Powerpoint.

    1. Создайте новый файл в Powerpoint.

    2. Выберите в верхнем меню во вкладке Вид «Образец слайдов».


    Слева появится стандартный образец слайдов.

    Вот с ним мы и будем работать. И сделаем из стандартного нестандартный.

    3. Выбираем нужную шрифтовую тему или создаем новую.

    Шрифтовая тема - это те шрифты, которые вы используете в презентации. Поверьте, помимо Calibri есть масса других хороших шрифтов. Укажите их всего 1 раз, и они автоматом заменятся во всей презентации или шаблоне.


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

    5. Как мы видим, слева много вариантов расположения текста, заголовка и т.д. Но что делать, если нам нужен, такой, которого нет? Например, чтобы было 3 картинки с подписями.


    Тогда нам поможет функция Вставить макет + Вставить заполнитель.

    После того, как нажимаем «Вставить макет» создается пустой слайд. И его мы можем заполнить как хотим.


    7. Теперь, если мы собираемся создать новый слайд, то мы видим варианты из нашего шаблона.

    8. Создаете новую презентацию и «потеряли» ваш шаблон? Заходите во вкладку Дизайн и ищите его там.

    Только следует учесть, что вордпресс генерирует некоторые классы, которые должны присутствовать в таблице стилей. К примеру классы aligncenter, alignleft и alignright служат для выравнивания изображений и блочных элементов, и их нужно включить в свою таблицу стилей (можно скопировать из таблицы стилей дефолтной темы):


    .aligncenter,
    div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    .alignleft {
    float: left;
    }
    .alignright {
    float: right;
    }

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


    .wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
    margin: 10px;
    /* необязательные параметры, которые сделают скругленные углы в поддерживаемых браузерах*/
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }
    .wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
    }
    .wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    padding: 0 4px 5px;
    margin: 0;
    }

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


    .categories {...}
    .cat-item /* Этот класс присваивается всем категориям */}
    .current-cat {/* стиль текущей категории */}
    .current-cat-parent {/* стиль для предка(ов) текущей категории */}
    .children {/* класс для потомка */}
    .pagenav {/* постраничная навигация */}
    .page_item {/* любой элемент списка */}
    .current_page_item {/* этот класс присваивается в списке страниц к текущей активной странице */}
    .current_page_parent {/*класс для родительской страницы по отношению к текущей */}
    .current_page_ancestor {/* любая страница верхних уровней по отношению к данной */}
    .widget {/* все виджеты обворачиваются в этот класс */}

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

    К примеру в дальнейшем мы подключим поисковую форму на сайт через спец. тег wordpress , в результате чего wordpress выведет такую форму:

    Поэтому учитываем это при верстки темы.

    И последнее, что нужно добавить в style.css это информацию о себе любимом и о созданной теме. Информация размещается в начале файла в коментах:

    /*
    Theme Name: Придумайте уникальное имя темы
    Theme URI: http://ссылка-на-домашнюю-страницу-темы
    Description: Описание темы
    Author: Автор темы
    Author URI: http://ссылка-на-страницу-автора
    Template: название-темы-предка
    Tags: теги темы - только из списка предлагаемого wordpress.org
    Version: версия
    Ну и здесь текст лицензии
    */

    Также не забудьте сделать screenshot.png и положить его в папку с шаблоном (в корень). Информация, размещенная таким образом в таблице стилей, будет отображаться в админке в разделе Управление «темами» . Сверстанный шаблон тестируем в браузерах, если все норм, можно идти далее.

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

    Принцип работы wp-темы :

    Если вы откроете папку темы по умолчанию (wp-content/themes/default), вы увидите множество файлов PHP (файлы темы) и одного файла style.css. Когда мы просматриваем блог, WP подключает файлы темы (index.php <

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

    Шаг 1:
    Для начала в директории тем вордпресса (wp-content/themes) создайте папку с именем нашей темы. Пусть это будет ruseller_lessons . Затем из папки темы по умолчанию (wp-content/themes/default) скопируйте файлы comments.php, search.php и 404.php в папку нашей темы. Эти файлы отвечают за комментарии и поиск на блоге. Затем в ruseller_lessons скопируйте таблицу стилей style.css нашего шаблона, screenshot.png (300x225) и папку images .

    Теперь файлы нашего шаблона нужно "распилить", т.е. вытащить в отдельные файлы footer, sidebar и header. Схема показывает упрощенный вид файла index.php с метками, согласно которым будем его пилить:

    Шаг 2 - Header.php
    Открываем index.html и вырезаем все, что находится до коментария , создаем новый файл header.php и вставляем в него вырезанный код, сохраняем в директории нашей темы ruseller_lessons :






    index.html






    Теперь идем в папку с дефолтной темой, открываем header.php и копируем оттуда теги , <link>, <h1>, and <div class=description> </b>и ими заменям соответствующие строки в нашем <b>header.php </b>.</p> <p>Затем все теги <li>, находящиеся <b>id="nav" </b>(список страниц в верхней части блога) заменям на функцию вордпресса</p> <p><b> <?php wp_list_pages("sort_column=menu_order&depth=1&title_li=");?> </b></p> <p>В итоге получаем:</p><p> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br> <title><?php wp_title("«", true, "right"); ?> <?php bloginfo("name"); ?>
    " type="text/css" media="screen" />
    " />





    Шаг 3 - Sidebar.php
    Возращаемся к файлу index.htm. Первым делом удаляем всю форму поиска, затем вырезаем из него все от

    Категории
    Видеоматериалы
    Популярное
    Новое