Дабы не плодить многабукаф, решил я разделить отдельные темки цикла «Создание шаблона для Вордпресс» на части. Сегодня продолжим разговор за самый важный блок, а именно — Контент.
Картинки (они же — изображения, они же — фотки и пр.)
В предыдущем посте комментатор Илья задал хороший вопрос о том, как сделать обтекание текстом картинки. Напомню, что обтекание может быть как слева, так и справа, а может не быть вовсе. Выглядеть это может так:
Если вы не хотите заморачиваться с обтеканием или возникают какие-то сложности с этим делом, то можете поступить проще: делайте картинки размером по ширине почти такими же, как и сама центральная часть блога. Например, центральная часть у нашего шаблона равна 550 пикселям.
#noticias {
float: left;
margin: 0;
padding: 0 0 20px 20px;
width: 550px;
}
С учетом того, что в правилах для этого блока задан отступ слева в 20 пикселей, размер картинки выбираем: 550 – 20 – 5(на всякий случай) = 525. Выкроив в фотошопе картинку такого размера по ширине, мы заполним ею практически всю центральную часть. Таким образом, последующему за ней тексту будет некуда деваться, и он автоматом перейдет на нижнюю строку.
Но не всегда есть в наличии такие широкие изображения, либо нам заведомо хочется тиснуть в пост что-то мелкое. Тогда нужно каким-то образом определить для изображения, с какой стороны его будет обтекать текст. Если этого не сделать, то получим вот такую неказистую картину:
Происходит это оттого, что браузер считает изображение элементом текста, и, соответственно, располагает ее на той же строке, где и последующий за ней шрифт. Чтобы этого избежать, можно поступить одним из следующих способов:
Вариант 1. Прописать заранее в листе стилей CSS для всех изображений в тексте обтекание слева или справа. Например:
#noticias img {
float: left;
margin: 0 10px 10px 0;
}
Это правило означает, что все изображения, помещенные в блоке #noticias, будут «плавать» слева от текста. Причем снизу и справа от картинки текст будет на расстоянии 10 пикселей.
Точно также можно задать и плавание справа:
#noticias img {
float: right;
margin: 0 0 10px 10px;
}
Обратите внимание: значения полей изменились. Теперь уже снизу и слева от картинки текст расположен на расстоянии 10 пикселей.
Вариант 2. Прописать, опять же заранее, в листе стилей CSS два класса для изображений, соответственно для правого и левого обтекания. Например так:
#noticias .floatleft {
float: left;
margin: 0 10px 10px 0;
}
#noticias .floatright {
float: right;
margin: 0 0 10px 10px;
}
Затем, когда пишете пост, переключитесь в режим отображения кода (вообще рекомендую всем заранее зарулить в свой профиль в админке и убрать галочку в строке «Использовать визуальное редактирование», чтобы всегда писать посты только в режиме кода). Добавив в пост картинку, увидим в тексте примерно следующее:
<img src='http://www.vorobyaninov.com/wp-content/uploads/2008/08/muzshiksosv.jpg' alt='muzshiksosv.jpg' />
Если нам нужно, чтобы картинка «плавала» левее текста, то мы прямо по ходу написания поста правим этот код следующим образом:
<img class="floatleft" src='http://www.vorobyaninov.com/wp-content/uploads/2008/08/muzshiksosv.jpg' alt='muzshiksosv.jpg' />
То есть, просто к тэгу img добавляем class со значением floatleft.
Лирическое отступление:
Данные способы хороши до поры, а именно, пока у вас в посте не появятся другие изображения, которые вы сами не размещаете. Я имею в виду всевозможные кнопки и иконки добавления в закладки. Ведь они тоже являются изображениями и точно так же выводятся тэгом img. А потому бдите! Чтобы у вас случайно пара десятков иконок соц.закладок не затерялась в обтекающем тексте поста.
Вариант 3. Прописываем стиль непосредственно в коде картинки. Этим способом пользуюсь я сам, потому что мне так проще и удобнее. Хотя должен признать, что это идет в разрез с правилами консорциума W3C.
Точно так же добавляем в текст картинку, но код для нее дополняем следующим образом:
<img style="float: left; margin: 0 10px 10px 0;" src='http://www.vorobyaninov.com/wp-content/uploads/2008/08/muzshiksosv.jpg' alt='muzshiksosv.jpg' />
Здесь мы внедрили стиль прямо «по-месту». Правила здесь пишутся практически точно так же, как и в CSS, только без фигурных скобок. Не теряем знаки : и ; ну и кавычки конечно же!
Все супер, картинка встала как надо! только вот почему вдруг получилась вот такая вот фигня?
Дело в том, что задав обтекание, мы тем самым позволили всему последующему за картинкой тексту заполнить свободное пространство справа от картинки. В том числе, и нижеследующему посту, так как он является ни чем иным как тем же текстом! А произошло такое по простой причине: у нашего поста с картинкой слишком мало своего текста. Потому нижележащий пост «подтянулся» кверху. Чтобы этого не происходило, открываем файл index.php, находим там вот это место:
<?php the_content("Continue reading ".the_title('', '', false)."..."); ?>
Этот кусок кода выводит непосредственно сам пост. Сразу же за ним впишем следующую строку:
<div class="clearfloat"></div>
А в листе стилей, как мы помним, у нас уже есть правило для этого класса:
.clearfloat {
clear: both;
}
Таким образом, мы указываем браузеру, что после записи в посте не должно быть более ничего, и что следующий пост должен начинаться с новой строки.
Вариант 4. Использование сторонних программ-приложений. Как вариант — это тоже можно использовать. Речь идет о Windows Live Writer. Это приложение, которое облегчает публикацию разнообразного содержимого в блоге. Там можно визуальными методами располагать картинки в потоке текста. Подозреваю, что при этом в код добавляется неизбежный мусор, хотя врать не буду, не знаю ибо не пользуюсь. Почитать подробнее о данной программке можно здесь.
С центральной частью блога, именуемой контентом, мы более или менее разобрались. В следующий раз обратимся к навигации, которая в Вордпрессе обзывается сайдбаром.
Вот спасибо! Даже несколько вариантов решения моего вопроса! Буду пробовать, кроме четвертого варианта. Моя операционка им не нравится, увы.
Ждем продолжения цикла. Интересно видеть, как на наших глазах рождается новая книга.
Ответить
Окей! Скоро последует продолжение. А в итоге, скорее всего, снова оформлю данный цикл в виде электронной книги. :)
Ответить
ой, а я как раз хотел спросить разрешения, можно ли будет, по окончанию написания, тоже оформить в книжечку эти статьи? :)
Ответить
Привет, Найкрис! Конечно можно. Правда я сам пока не знаю, что туда войдет. Возможно как и в первой книге буду править какие-то части и дополнять :)
Ответить
спасибо
Ответить
Продолжаю учиться. И вот следующий вопрос: хочу посмотреть CSS этой странички, а нетути! И куда его запрятали?
Вообще это очень полезно, посмотреть начинку понравившейся странички, чтобы разобраться. В шаблонах отдельным файлом стоит CSS, на практически любом сайте тоже можно “подсмотреть”. Полезно бывает очень, и свои ошибки становятся виднее. Почему-то здесь его не видно…
Вопрос по существу строения шаблонов для WP:
Мне понравился шаблон созданный не для WP, но есть сходство. В плане повторения идеи распределения материала (то есть как именно расположены блоки) внешнего оформления понятно, что повторить можно. Добавление статьи ведет к тому, что появляется пункт в меню. А мне надо, чтобы появлялось в меню то, что WP считает рубриками.
Можно ли как-то сделать, чтобы было отображение рубрик в виде меню, а там где рубрики ставились разделы сайта.
Не знаю, понятно ли выражаюсь.
Мне нужен динамичный сайт, где блог является разделом (заметки + комментарии), а статьи, галерея, и еще что-то тоже присутствовали. Вот ломаю голову, может быть мне нужен сайт отдельно, а блог отдельно, но чтобы с сайта были прямые ссылки-переходы на блог. Или возможно все это хозяйство установить так, чтобы одним движком управлялось?
Еще один вопрос. Когда используется WP базы данных создаются как обычно для сайта PHP, или автоматически идет наполнение?
Ответить
2 вадим: Велкам! :)
2 Илья: CSS какой страницы? Если создаваемого нами шаблона, то его пока в сети нет, он лежит у меня на локалке. После выложу полный вариант.
По поводу размещения в меню пунктов страниц/рубрик, честно говоря, не совсем понял. Но подобных вопросов и ответов очень много как раз на форуме WP: http://forum.maxsite.org/index.php. Вариации могут быть различными. Я пользуюсь стандартными настройками и считаю их самыми удобными. Все остальное - от лукавого :)
База данных WP наполняется автоматически по мере написания статей. Создается как и для любого другого CMS движка.
Ответить
CSS этой страницы ( ну или всего сайта), которую обычно просматриваю через Информацию о странице в Мозилле.
Спасибо за ссылку, нашлось несколько полезностей. Правда читать форум трудновато, там люди более опытные и многое не доходит. Ну ничего. Главное понятно стало, что можно одну из страниц шаблона значительно изменить по внешнему виду, как здесь написано: http://forum.maxsite.org/viewtopic.php?id=2828 Конечно, надо попробовать, получится ли у меня.
Ответить
Нет ничего проще. Заходите на сайт, открываете страницу в режиме просмотра кода и находите среди мета-тэгов строку подключения CSS файла. В ней и будет адрес файла. В данном случае вот этот:
http://www.websovet.com/wp-content/themes/modernpaper/style.css
Обычная ссылка, по которой можно просмотреть CSS файл :)
Ответить
Cпасибо, это новый для меня ход. Смотрю обычно через информацию о странице - ссылки, а тут иначе.
Почему захотелось посмотреть? Хочу понять, отчего зависит оформление текста с кодом, и почему он выпрыгивает за зеленую рамочку (не очень красиво как-то). А сейчас вижу в ответе ссылку на файл и начинаю догадываться, что это именно ссылки не переносятся на другую строку, потому и нарушают границы.
Ответить
Если честно, то сам пока не могу понять, почему в некоторых постах код выходит за рамку. Причем видно это только в Опере, а в ИЕ и Фоксе такого не происходит. Опера вообще стала в последнее время глючить больше, чем “ослик”. Перехвалили наверное :)
Ответить
Чудеса в решете! У меня в IE7 и Опере показывается все в рамках, то есть с переносами, а Мозилла (Фокс)переносов не делает, и рамки нарушаются.
Так что явление сие неоднозначное. И впервые обращаю на это внимание, потому как бьюсь над своим первым сайтом. А в Интернет хожу обычно именно с Мозиллой.
Ответить
Могу прислать скриншоты, но не знаю куда направить.
Ответить
Да не, спасибо, Илья. Я уже видел. :) Будем думать.
Ответить
Добрый день, Игорь! У меня есть вопрос по WP. Пока что не понел..Можно ли в админке менять текст между тегами , чтобы титлы каждой страницы были разные.. Сейчас пользуюсь CMS E107, там такой возможности нет.. Очень заинтерисовал WP. И конечно же то как доступно вы описываете его. Зарания спасибо!
Ответить
Здравствуйте, Виктор!
Да, можно. Есть специальный плагин - All in One SEO Pack. Там можно не только титл любой прописать для любой страницы, но и много чего еще полезного добавить и настроить.
Ответить
Игорь, может быть сделаете обзор необходимых плагинов и способа их подключения? В более новой чем у меня версии включено их очень много, а кто за что отвечает понять невозможно. Знаю лишь, что надо убрать то чем не пользуешься чтобы облегчить систему и увеличить скорость. И как лучше, удалить из более новой версии некоторые, или добавить в старую только нужное?
Ответить
Окей! Спасибо за наводку :) Скоро напишу обзорный пост о некоторых, наиболее часто употребимых плагинах и способах их настроек.
Ответить
Добрый день, Игорь! Большое спасибо Вам за разьяснения! Очень помогли.Буду теперь разбирать движок WP. А Ваш сайт очень мне поможет. Очень нравится, как вы доносите до пользователей информацию..Спасибо за это Вам!
Ответить
Добрый день, Виктор! Спасибо на добром слове!
Ответить
В сети есть шаблоны для WP в которых гораздо больше файлов, чем в варианте над которым мы работаем. Значит чтобы наш создаваемый шаблон работал в реале, надо будет его тоже потом чем-то начинять?
Очень хочется поскорее разобраться и запустить свой первый блог. И пожалуйста, сделайте разъяснение как всю отладку сделать локально, и как перенести сделанное на хостинг. Сейчас я экспериментирую прямо в сети, но меня никто пока не видит. А если уже запуститься такие эксперименты вряд-ли будут уместными.
С нетерпением жду продолжения урока.
отличное качество объяснений!
Ответить
На самом деле количество файлов в шаблоне может быть любое. Это зависит скорее от изобретательности и креатива разработчика :) На скорость и полноценную работу шаблона это никак не влияет. Например, сейчас много стало появляться шаблонов со встроенными уже непосредственно в файлы кусками кодов, бывших ранее обычными плагинами. Как по мне, так решение не самое удачное. Например, при обновлении версии Вордпресса, может появиться несовместимость этого встроенного кода с новой версией, и тогда движок сломается. Починить Вордпресс после криво установленного плагина легко - удалил его из папки через фтп, и все вернулось на круги своя. А здесь придется выискивать и выдирать прямо из файлов куски кода. Морока та еще.
Так ведь как раз об этом я и рассказываю в данном цикле статей. Все переделки существующего шаблона мы делаем на своей машине. Потом готовую тему зальем на хостинг и там ее активируем.
Ответить
Поясню свой вопрос. ПОСЛЕ того, как мы все это сделаем, и зальем на хостинг, вдруг появится желание что-то поменять. Есть ли возможность, например, поменять отдельные элементы дизайна (например, логотип в шапке, или текст заголовка), и как это делается? Вносим необходимые изменения на локальном сервере и потом заливаем только этот измененный файл, удаляем прежний, не трогая остального? Если так - это очень хорошо, все будет под контролем. Как хочется получить в результате легкоуправляемый сайт!
Ответить
Да, конечно! Можно поменять что-то на локалке, а потом просто перезалить исправленный файл темы на хостинг. Если же нужны кардинальные изменения (вот как например нынешняя смена дизайна на Вебсовете), то старая тема из папки themes удаляется, а новая заливается и активируется через админку.
Ответить
Пожалуйста, расскажите о применении Firebug для проверки. Начинаю с ним знакомиться по вашей рекомендации, и не понимаю, почему показывает столько зачеркнутых элементов.Это действительно лишний код? Инспектор даже на этой страничке находит что зачеркнуть, но надо ли это делать?
Ответить
Вот уж здесь ничем помочь не смогу. :) Как один из способов использовать его можно, но сам я им не пользуюсь, а потому ничего конкретного сказать не могу. Хотя тема для статьи интересная. Возможно в будущем я поковыряю этот Firebug и опишу его возможности.
Ответить
Удалось разобраться (немножко) и спешу поделиться. Этот Firebug просто замечательная штука! Если заблудишься в коде, что бывает, когда делаешь много поправок, то с помощью функции inspect можно выделить необходимый блок при просмотре странички в браузере, и увидеть слева все что к этому элементу относится, причем с указанием строки.
Сегодня за полчаса удалось справиться с тем, над чем пришлось мыкаться почти сутки. так что из своей уже практики рекомендую.
Ответить
Ну тогда тем более постараюсь найти время, чтобы повозиться с этой штуковиной :)
Ответить
Снова я с вопросами. Вставляю картинку, загружается она с моего компьютера нормально, встает тоже как надо (слева-справа), но вот код прописывается какой-то непонятный, с целой кучей цифр и букв типа этого: …/uploads/2008/09/d180d0b5d0bad0bbd0b0d0bcd0b0-d18ed188d0bad0bed0b21-300×142.gif…Это имеет какое-то значение, надо как-то переименовывать, и где (если надо)?
Ответить
А имя у картинки не на русском ли языке изначально? :) А вообще при установке картинки в пост, если картинка не используется как ссылка, то нужно выставить в настройках к ней “Показать: Полный размер” и “Ссылка на: Нет”
Ответить
Ой! Правда, имя было на русском, к моему стыду. А картинка является ссылкой. Теперь при наведении высвечивается название латиницей, а если его заменить, это надо заново загрузить переименованную картинку (я так думаю)?
Ответить
Получилось. Действительно, надо быть внимательнее к деталям и настройкам. Спасибо, есть к кому обратиться за помощью.
Ответить
Да, это довольно распространенная ошибка, когда картинки сохраняют с русскими именами, а порой еще и состоящими из нескольких слов, разделенных пробелами. :)
Ответить
Очень хочется ввести такой элемент, когда при наведении на текстовую ссылку всплывало изображение. Реализовать то, что показано на сайте http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/#thumb (такой эпизод, как появляющиеся суши и кофе. Пробую вставить предлагаемые кусочки кода и изображения - ничего не получается. Может быть есть более простой вариант? Или WP не дружит с подобными сложностями, или опять я что-то не так вставляю.
Вообще, если подобные финты вставлять, обязательно прописывать в единый файл CSS темы, или можно внутри отдельной заметки прописать (где HTML)?
Ответить
Вот как получается, стоит задать вопрос, и голова включается! Получилось, и WP ни при чем, просто как всегда нужно особенно внимательно относиться к коду!
Ответить
А какой командой выводяться Мета-данные к статье, который были указанны при публикации?… И вообще где можно глянуть какие данные и какой командой выводяться в WP?
Ответить
Макс, поясните, о каких метаданных идет речь?
О командах и кодах ВП можно почитать в Кодексе
Ответить
Я не правильно обозвал эту вещь… Вообщем когда подаёте статью на сайт заполняете поле - метки(которые потом выводяться в плагине облако меток), так вот как вывести к каждой статье её метки, которые я написал при её публикации…
А насчет кодекса, я английский плохо знаю, нет ли того же самого на русском?
Ответить
Понял. Есть такая фишка. Можно выводить тэги (так они правильно называются) прямо в посте. Для этого обычно рядом с кодом вывода даты и названия рубрики добавляют следующий код:
<p><?php the_tags(); ?></p>Подробнее о тэгах здесь:
http://codex.wordpress.org/Template_Tags/the_tags
Полноценного перевода Кодекса на русский нет. Там тысячи страниц. Вряд ли кто осилит столько. Есть энтузиасты, но по-моему дальше оглавления они не ушли:
http://codex.wordpress.org/ru:Main_Page
Ответить