Архив для категории ‘работа с файлом style.css’

17 ноября 2010

Любому владельцу WordPress блога рано или поздно приходится заниматься улучшением внешнего вида своего детища. И без знаний HTML и CSS не обойтись. Вот и я на этот раз решил изменить вид ссылок из статей. Почему? Дело в том, что выглядели ссылки и подчеркивание слова, http адреса или пункта меню, которое я использовал для визуального выделения, вот так:

4 июня 2010

CSS validation service

Сегодня в разделе wordpress для начинающих рассмотрим сервис проверки таблиц стилей CSS, его еще называют CSS validator. Перед началом работы советую вам загрузить для использования редактор Notepad++.
Если вы еще не знакомы с правилами CSS, то рекомендую ознакомится с основами.

А если вы уже знакомы с CSS, то скорее всего уже вносили изменения-дополнения в файл CSS. Не исключено, что там могут содержаться ошибки. Хотя и в исходном коде шаблона возможны ошибки.
Итак сервис CSS validation — http://jigsaw.w3.org/css-validator/. Если страница загрузилась не в русской кодировке, то посмотрите самое верхнее меню для выбора языка. Всего есть три закладки:

  • для проверки документа по адресу
  • для проверки файла с локального компьютера
  • и для проверки CSS прямо в процессе набора

Нас сейчас интересует первая вкладка — Проверить URI. Вводим адрес сайта и в дополнительных возможностях выбираем профиль CSS 2.1 (есть возможность выбрать CSS3). И жмем кнопку проверить:

28 марта 2010

Инструменты Google

Вот пришло время мне на блоге сделать карту, поскольку статей накопилось уже достаточно и я сам начал понимать, что карта становится необходимой для навигации по сайту. Плагин я взял Dagon Design Sitemap Generator.
Некоторые вопросы об установке плагинов вы можете найти в посте WordPress для чайников: Установка плагинов. О том как устанавливать плагин от Dagon вы можете найти на блоге новичка
Я же коснусь вопроса улучшения внешнего вывода карты. Чтобы вы поняли о чем речь здесь первый рисунок. Это внешний вид карты без улучшений, т.е. сразу после установки плагина:

15 марта 2010

В этой статье я опишу как можно самому сделать навигацию по страницам блога. Можно было конечно воспользоваться WordPess плагином WP-PageNavi — для вывода страничной навигации по блогу (в нижней части будут страницы 1, 2, 3 и проч.), но решить задачу захотелось по другому. Сделать такой вывод самостоятельно, т.е. как сейчас принято говорить у власть предержащих «в ручном режиме».
Первое. Создаем файл pagenavi.php в папке wp-content/themes/имя_темы/

2 марта 2010

работа с палитрой в WordPressДавайте коснемся вопроса подбора цветов для оформления элементов страницы. В самом простом случае, при использовании уже готового шаблона(темы) WordPress, может возникнуть необходимость изменить заданные автором цвета шрифтов, рамок, заливки или иных элементов для придания более симпатичного, на ваш взгляд, отображения этих самых элементов на странице. Самым простым способом достичь желаемого является редактирование файла style.css (таблицы стилей).

Не лишним будет напомнить, что перед редактированием любых файлов шаблона, убедитесь в том, что сделана архивная копия на случай, если что-то пойдет не так и работоспособность сайта будет нарушена

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

20 февраля 2010

врезка

Иногда при написании статьи необходимо вывести пояснительную или дополнительную информацию, так сказать по ходу дела. Можно вставить в код ссылку на другую страницу вашего же сайта или на другой сайт в интернет. Но не всегда это бывает удобно, например пояснительный текст совсем небольшой или просто лучше не уводить посетителя на другой сайт, и лучше дать пояснение отдельным блоком прямо в статье. В таком случаях на выручку придет врезка. Это термин пришел из полиграфии и означает см.врезку слева.

Врезка — это блок дополнительной информации к статье

Ширину врезки вы, конечно, можете устанавливать сами, но есть правило (писаное или неписаное не знаю), что ширина врезки составляет 35% от ширины текста.

17 февраля 2010

Если взглянуть на код в файле index.php вашей темы, то можно найти  функцию the_content(); с помощью которой отображается либо все содержимое поста либо только та часть, которая находится до тега ‹!— —more— —›. Если the_content() вызывается без параметров или тема вашего блога не русифицирована, то на экране вы увидите примерно как на картинке


где ‘more’ смотрится как-то одиноко.
Давайте сделаем, чтобы ссылка на открытие статьи выглядела более презентабельно.
Сначала открываем файл темы index.php расположенный в /wp-content/themes/наша_тема/.  В редакторе, например Notepad2, Жмем CTRL+F для поиска вхождения ‘more‘ или ‘the_content‘.

...
     <div class="entry">
	<?php the_content('more &raquo;'); ?>
     </div>
...

Заменяем ‘more‘ на ‘Читать полностью‘ или текстом, который Вам нужен. Перед сохранением файла в редакторе Notepad2 не забудьте установить кодировку UTF-8 через меню File -> Encoding

15 февраля 2010

Существует очень удобный плагин Related Posts для вывода связанных постов с использованием тегов, однако не всегда устраивает внешний вид при выводе в конце поста. Чтобы добиться нужного вида пропишем новые классы в файле стилей задействованной темы.
Обычно это файл wp-content/themes/название_темы/style.css
Считаем, что плагин Related Posts уже установлен в каталоге Plugins нашего сайта и подключен через админку блога
Сначала зайдем в настройки Related Post: меню Настроки -> Related Post

Ставим WordPress на локальном копьютере