Все добрый вечер на wmbn.ru! Сегодня речь пойдет о темах для WordPress, их общей структуре и как редактировать тему. Скачать готовый шаблон и установить его может каждый, но вот довести его под себя не каждому под силу. Бывает такое, что вот отличный шаблон, хорошая цветовая гамма, кнопки, расположение блоков, но все равно чего-то не хватает или наоборот является лишним.

Шаблоны для WordPress

Структура и редактирование шаблона WordPress

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

Редактирование шаблона на WordPress

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

Редактирование шаблона средствами Worpdress

Писать про каждый шаблон входящий в тему не буду, а расскажу о том, как отредактировать главную страницу блога, в которой содержаться файлы (на примере шаблона в моем блоге) header.php, page.php и footer.php. Начнем с header.php — файл, содержащий код головной части блога, то есть все, что находится выше меню включительно. Чтобы понять весь код шаблона стоит поучить не только HTML и CSS, но и PHP, так как шаблон содержит элементы языка PHP. Но основное редактирование будет с использованием тегов:

<div id= ></div>
<p></p>
</br>
<ul><li></li></ul>
...

Их список большой, но они пригодятся при редактировании шаблона. Открыв файл в встроенном редакторе на WordPress, видим огромный код, который не всем будет ясен. Разбираться в нем пока не стоит, но подчеркнуть основные черты следует. Особенного в нем ничего нет, структура стандартная, но разве что есть строчки кода на PHP, JavaScript. Как и любой другой шаблон, первая строка начинается с объявления типа документа (какую версию (X)HTML использует шаблон):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

Затем стандартные теги для всех шаблонов:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- указывает кодировку текста -->
<title></title>
</head>

Далее начинается сам код структуры шаблона, который в основном состоит из блоков (div). За вид каждого блока отвечает файл CSS, в котором поименно содержится информация о стиле. В готовом шаблоне каждый файл имеет понятную структуру и разобраться какой стиль принадлежит блоку легко, даже на интуитивном уровне. То есть файл CSS не будет иметь в себе непонятные имена типа Old или vnizu, а конкретное comment, page.

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

...
</form>
</div>
</div>
<div id="board">
<div id="board_left">
<div id="board_items">
<div id="board_body">
<h2>Главные новости</h2>
<div id="board_carusel">
<div class="belt">
<?php $coint_i = carousel_featured_posts(FEATURED_POSTS); ?>
</div>
</div>
</div>
<ul id="board_carusel_nav">
<li><a href="javascript:stepcarousel.stepBy('board_carusel', -1)"><img src="<?php bloginfo('template_url')?>/images/button_prev.png" alt="Prev" /></a></li>
<li><a href="javascript:stepcarousel.stepBy('board_carusel', 1)"><img src="<?php bloginfo('template_url')?>/images/button_next.png" alt="Next" /></a></li>
</ul>
</div>
</div>
<div id="board_links">
<a href="<?php bloginfo('rss2_url'); ?>" title="Rss"><img src="<?php bloginfo('template_url')?>/images/button_rss.png" alt="<?php bloginfo('name'); ?> Rss" /></a>
<a href="<?php echo theme_twitter_link_show(); ?>"><img src="<?php bloginfo('template_url')?>/images/button_twitter.png" alt="" /></a>
</div>
</div>
<div id="body">
...

Как я упомянул, что он мне не нравится, то я его просто удалил и привел код к виду:

...
</form>
</div>
</div>
<div id="body">
...

Сложного ничего нет, достаточно понять за что отвечает каждый блок.

Редактирование файла style.css темы в WordPress

Про CSS много писать не буду. CSS, или каскадная таблица стилей, содержит в себе информацию о стиле каждого блока, то есть его расположении на странице, размеры, цвет и гарнитуру шрифта. Особенность CSS в том, что нет необходимости несколько раз указывать стиль для схожих объектов, о достаточно заключить код в тег:

<div id= >
код блока
</div>

Как я уже упомянул, имена в CSS соответствуют имени блока после id=имя_блока. Так как я удалил блок board, то следует избавиться от его упоминании в файле CSS. Для этого удалим все строки начиная с #board, заканчивая #board_carusel_nav li a{, то есть все блоки кода, описывающие тот самый вывод новостей (записей) блога.

Изменяя что-то на сайте вы рискуете нарушить его работоспособность, по этому экспериментировать с шаблоном, лучше на локальном сервере Denwer или XAMPP (или же полной альтернативе Apache), либо прямо на хостинге, но при этом заранее сделать резервную копию данных, а потом закачать ее снова, если произошла ошибка.

Комментариев: 7

  1. Александр

    Здравствуйте Вадим!
    Огромное Вам человеческое СПАСИБО!!!
    Следуя Вашим инструкциям, я отредактировал свой шаблон!
    Это так здорово, когда есть люди, которые могут действительно помочь.
    Удачи Вам во всём!
    С уважением, Александр.

  2. Orcinus Orca

    Да, шаблоны. Редактировать их приходится регулярно, если хочешь достичь какой-либо уникальности своего проекта.

  3. writer

    West Blogger Это от человека зависит. Захочет он использовать скаченный шаблон (если он ему всем понравился) или просто от лени.

  4. Orcinus Orca

    А что еще можно интересного с текстом блога делать, если получишь доступ к его исходникам? Самый кайф, что они хранятся в открытом виде, а это значит, что ты можешь делать практически всё что угодно.

  5. Дмитрий

    Здравствуйте!
    Подскажите пожалуйста, куда обратиться с такой проблемой:
    Выбрал себе шаблон StarStruck, у которого шапка страницы сайта визуально расширяется по горизонтали до краёв экрана за счёт позиционирования с помощю style.css в теге body фоновой картинки методами: top left repeat-x. Весь остальной фон приобретает цвет, присваеваемый соответствующим атрибутом. Итог: атрибут выбора картинки фона занят украшением шапки, остальной фон имеет просто цвет, но не оформлен изображением. Хотелось бы: вместо цвета замостить весь оставшийся фон какой-либо картинкой.

    Что пытался сделать: с помощю фокуса CSS3 применить в стилях мультифон таким способом -
    body{
    border:0;
    padding:0;
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    text-align:center;
    background: orange url(/zoonews/code/redaktirovanie-shablona-sredastvami-wordpress-cherez-panel-administratora/images/bg_header.gif) top left repeat-x, url(/zoonews/code/redaktirovanie-shablona-sredastvami-wordpress-cherez-panel-administratora/images/background_wood.jpg);
    }

    Метод не срабатывает, даже если я меняю в описании background местами ссылки на изображения и играю с описанием атрибутов, в результате одно из двух получается, либо мостится весь фон и пропадают аолоски по краям шапки, либо пропадают все фоновые изображения вообщеа фон становится просто белый. Как быть, спасите?!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>