Войти через loginza
Закрыть панель

3

Мар

2010

Картинки в wordpress

Распечатать статью Разместил: spider. Рубрика WebDesign |

Очень часто при вставке картинок в wordpress возникает ситуация, когда хочется сделать обтекание картинки текстом.
Но когда выбираешь положение картинки слева (справа) текст отображается по нижней границе.
Связано это с тем , что при таком выборе wordpress добавляет стили отображения картинки

.aligncenter
.alignleft
.alignright
.wp-caption

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

.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;
/* optional rounded corners for browsers that support it */
-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;
}

Теперь картинка должна смотреться так, как Вы и задумывали.
Если не хотите каждый раз делать отступ можно сразу прописать по 5 px:

.alignleft {
float: left;
margin-right: 5px;
}
.alignright {
float: right;
margin-left: 5px;
}

Вот и все премудрости.

 

22

Фев

2009

Собственный стиль в WordPress

Распечатать статью Разместил: spider. Рубрика WebDesign |

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

Сначала выложу принципы взятые из форумов по WP:

Создаем страницу _http://moi.site/test, имеющую индивидуальный шаблон.

1. В папке Темы делаем копию файла index.php (page.php, 404.php) и называем эту копию test.php

2. В самом начале test.php добавляем

Код:

<?php
/*
Template Name: Test template
*/
?>

3. Удаляем из полученного шаблона вывод основного цикла Loop (если он есть и если он не понадобится). Обычно Loop начинается

Код:

<?php while (have_posts()) : the_post(); ?>

и заканчивается

Код:

<?php endwhile; endif; ?>

4. Вставляем на освободившееся место то, что нам нужно.

5. В админке создаем страницу «Тестовая страница», выбрав в качестве шаблона «Test template». (Если всё сделано правильно, в правой колонке появится выбор шаблона.) Слаг (ярлык, короткую сслыку) страницы делаем «test».

И второй рекоммендуемый вариант :

«Подключение внешней страницы в Ваш сайт Wp», это может быть и форум и всё, что угодно.
Рассмотрим на примере подключения страницы яндекса
1. Заходим в папку с темой Ваше и ищием там файл index.php
2. Копируем этот файл в эту же папку с темой, только назовём его yandex.php
3. Открываем файл в блокноте, ищеи там <?php include (TEMPLATEPATH . ‘/theloop.php’); ?> и заменяем TEMPLATEPATH . ‘/theloop.php’ на ‘http://www.yandex.ru’ не потеряйте две ‘   ’  это важно.
4. В самое начало этого же файла вставляем

<?php
/*
Template Name: yandex
*/

Вместо yandex здесь можно написать любое название темы или файла, в общем как Вы будете в адльнейшим из админки опознавать, что это именно, то, что Вам нужно.
Сохраняем.
Заливаем этот файл на сервер в папку с темой
5. Заходим Админка-Управление страницами-Создать страницу и в пункте Шаблон страницы выбираем там, то название которое вы указали в строке Template Name: yandex
Сохраняетесь.

<?php include (TEMPLATEPATH . '/theloop.php'); ?>   — таких вещей в шаблоне у меня не обнаружилось.

Зато вьехал что такое цикл (Loop) и что подним подразумевалось.

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="title  clearfix">
<div class="date">
<p class="day"><?php the_time('j') ?></p>
<p class="month"><?php the_time('M') ?></p>
<p class="year"><?php the_time('Y') ?></p>
</div>
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Постоянная ссылка на запись: <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<small>Разместил: <?php the_author() ?>. Рубрика: <?php the_category(', ') ?> | <?php edit_post_link('Изменить', '', ' | '); ?>  <?php comments_popup_link('Нет комментариев &#187;', '1 комментарий &#187;', '% коммент. &#187;'); ?></small>
<br class="endOfSection" />
</div> <!-- title -->
<div class="entry">
<?php the_content('<p class="more">Читать запись полностью &raquo;</p>'); ?>
<br class="endOfSection" />
<small><?php comments_popup_link('Нет комментариев &#187;', '1 комментарий &#187;', '% коммент. &#187;'); ?> </small>
<a class="backToTop" href="#" title="Back To Top">&nbsp;</a>
</div>
</div>  <!-- / POST -->
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('&laquo; Предыдущие записи') ?></div>
<div class="alignright"><?php previous_posts_link('Новые записи &raquo;') ?></div>
</div>
<?php else : ?>
<h2 class="center">Не найдено</h2>
<p class="center">Извините, но того, что Вы искали, тут нет.</p>
<?php endif; ?>

Вот такой кусок кода из index.php шалона и есть цикл (Loop). Удаляем его, а на его месте пишем свой код.

Да, у меня не заработало пока не определил в Настройках WordPress Главную страницу сайта.