Скин для WP своими руками. (css – мания)

CSS-оформление

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

В самом простом случае нам с Вами придётся отредактировать стили следующих тэгов:
<body> – основной не форматированный текст
<h2> – тэг заголовка 2 уровня
<p> – тэг форматированного текста
<ul> – тэг ненумерованного списка
<a> – тэг ссылки.

Кроме того, в отдельные классы оформления вынесем:
.hdr – заголовок статьи
.postmetadata – сведения о рубрике и авторе записи
.foot – подвал (пятка) блога
.side – панель навигации
.calendar – календарь записей
.utils – дополнения к записи (счётчик комментариев, trackback-и и пр.)

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

a{text-decoration: none}
body{font-family: Arial, Helvetica, sans-serif; font-size: 0.9em}
h2{padding: 0px; margin: 0px; font-size: 1.8em; text-align: center; vertical-align: middle}

p {margin: 10pt}
ul{margin: 5px; padding: 0px; list-style-type: none}

Со следующими шагами – сложнее. К примеру, стиль calendar потребует от нас добавить описание в файл sidebar.php:

<tr> <!—Блок графического календаря за месяц, с указанием дат записей блога —>
<td>
<li><h3>Календарь:</h3>
<div class=”calendar”><?php get_calendar(3); ?></div>
</td>
</tr>

и только тогда строка
.calendar{font-size: 0.9em; text-align: center; background-color: #FFFEF0}
в файле style.css даст требуемый эффект.
Изменив в том же sidebar.php ещё одну строку:

<table class=”side”>
<tr> <!—Блок информации об авторе блога… —>
<td>
<li><h3><?php _e(‘Автор:’); ?></h3>
<ul><li>Сюда пишете краткую информацию о себе… или о хозяине блога, если это не Вы</a></li></ul>
</td>
</tr>

и внеся в style.css
.side{background-color: #F0FFF7; list-style-type: none}
раскрасим фон и уберем точки в начале заголовков меню

Для активации
.foot{background: #F0F8FF; font-size: 0.7em}
в файле footer.php надо изменить содержимое так:

<td colspan=”2″ class=”foot”>
<center>
<?php bloginfo(‘name’); ?> работает на движке от

И в завершении первого подхода к  CSS–файлу, внесем в index.php следующие изменения:

<?php while (have_posts()) : the_post();?> <!–Выводим содержимое статьи–>
<div>
<div>
<?php the_date(”,'<h4>’,'</h4>’); ?>
</div>
</div>

<table width=”99%” class=”hdr”><tr><td>
<h2 id=”post-<?php the_ID(); ?>”><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Статическая ссылка на <?php the_title(); ?>”><?php the_title(); ?></a></h2>
</td>
</tr></table>
<p class=”postmetadata”>Рубрика <?php the_category(‘, ‘) ?> автор – <?php the_author() ?>  <?php edit_post_link(‘Править’,'<strong>(‘,’)</strong>’); ?></p>
<p><?php the_content(‘Читать далее…’);?></p><div class=”utils”><?php comments_popup_link(‘Комментировать &#187;’, ‘1 Комментарий &#187;’, ‘% Комментария &#187;’); ?></div> <!–Счётчик комментариев–>
<p><?php comments_template(); ?></p> <!–Форма комментариев (отображается при чтении одной статьи)–>

Как видите, заголовок я поместил в таблицу. Во-первых, потому, что стили отображения CSS (display: )несколько искажаются в Опере. Во-вторых, потому, что теперь для добавления кнопок из плагинов можно просто указать “карман”, написав вместо </tr></table>
<td width=”40px”>/*Здесь – Ваши кнопки*/</td></tr></table>
и отображение не покорёжит в оконном режиме браузера.

Осталось в файле style.css написать:
.hdr{background: #F0F8FF; vertical-align: middle}
.postmetadata {font-weight: bold}
.utils{background-color: #F0F8FF; text-align: right}
и посмотреть на нововведения.

На сегодня – всё. Поэкспериментируйте со стилями сами.
А в будущем нас ожидает тонкая доводка css под различные браузеры и курс “похудения” для кода.

Удачи Вам.

4 комментария

  1. avatar

    хостинг

    спасибо,сейчас попробую поэкспериментировать.

    • avatar

      levati

      Обещанная статья выйдет в мае, времени совсем мало на блоггинг.
      Спасибо, что читаете. smile

  2. avatar

    nordic

    У меня почему-то с таблицами совсем все сложно, очень странно применяются стили, хотя часто только на таблицах можно обеспечить кроссбраузерность.

    • avatar

      levati

      Таблицы и формы в CSS описываются классами, а отдельные элементы форм и ячейки таблиц можно задать через ID. Что до кроссбраузерности – никак не соглашусь, т.к. грамотная слоевая вёрстка отображается во всех браузерах, кроме творения MS одинаково. А кода гораздо меньше.