Архив для категории ‘работа с файлом style.css’
Сегодня в разделе wordpress для начинающих рассмотрим сервис проверки таблиц стилей CSS, его еще называют CSS validator. Перед началом работы советую вам загрузить для использования редактор Notepad++.
Если вы еще не знакомы с правилами CSS, то рекомендую ознакомится с основами.
А если вы уже знакомы с CSS, то скорее всего уже вносили изменения-дополнения в файл CSS. Не исключено, что там могут содержаться ошибки. Хотя и в исходном коде шаблона возможны ошибки.
Итак сервис CSS validation — http://jigsaw.w3.org/css-validator/. Если страница загрузилась не в русской кодировке, то посмотрите самое верхнее меню для выбора языка. Всего есть три закладки:
- для проверки документа по адресу
- для проверки файла с локального компьютера
- и для проверки CSS прямо в процессе набора
Нас сейчас интересует первая вкладка — Проверить URI. Вводим адрес сайта и в дополнительных возможностях выбираем профиль CSS 2.1 (есть возможность выбрать CSS3). И жмем кнопку проверить:
Вот пришло время мне на блоге сделать карту, поскольку статей накопилось уже достаточно и я сам начал понимать, что карта становится необходимой для навигации по сайту. Плагин я взял Dagon Design Sitemap Generator.
Некоторые вопросы об установке плагинов вы можете найти в посте WordPress для чайников: Установка плагинов. О том как устанавливать плагин от Dagon вы можете найти на блоге новичка
Я же коснусь вопроса улучшения внешнего вывода карты. Чтобы вы поняли о чем речь здесь первый рисунок. Это внешний вид карты без улучшений, т.е. сразу после установки плагина:
В этой статье я опишу как можно самому сделать навигацию по страницам блога. Можно было конечно воспользоваться WordPess плагином WP-PageNavi — для вывода страничной навигации по блогу (в нижней части будут страницы 1, 2, 3 и проч.), но решить задачу захотелось по другому. Сделать такой вывод самостоятельно, т.е. как сейчас принято говорить у власть предержащих «в ручном режиме».
Первое. Создаем файл pagenavi.php в папке wp-content/themes/имя_темы/
Давайте коснемся вопроса подбора цветов для оформления элементов страницы. В самом простом случае, при использовании уже готового шаблона(темы) WordPress, может возникнуть необходимость изменить заданные автором цвета шрифтов, рамок, заливки или иных элементов для придания более симпатичного, на ваш взгляд, отображения этих самых элементов на странице. Самым простым способом достичь желаемого является редактирование файла style.css (таблицы стилей).
Файл style.css обычно находится в одной папке с остальными файлами шаблона, но возможны варианты. В случае с шаблоном этой темы при просмотре файла style.css видим следующий код
Иногда при написании статьи необходимо вывести пояснительную или дополнительную информацию, так сказать по ходу дела. Можно вставить в код ссылку на другую страницу вашего же сайта или на другой сайт в интернет. Но не всегда это бывает удобно, например пояснительный текст совсем небольшой или просто лучше не уводить посетителя на другой сайт, и лучше дать пояснение отдельным блоком прямо в статье. В таком случаях на выручку придет врезка. Это термин пришел из полиграфии и означает см.врезку слева.
Ширину врезки вы, конечно, можете устанавливать сами, но есть правило (писаное или неписаное не знаю), что ширина врезки составляет 35% от ширины текста.
Если взглянуть на код в файле 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 »'); ?>
</div>
...
Заменяем ‘more‘ на ‘Читать полностью‘ или текстом, который Вам нужен. Перед сохранением файла в редакторе Notepad2 не забудьте установить кодировку UTF-8 через меню File -> Encoding
Существует очень удобный плагин Related Posts для вывода связанных постов с использованием тегов, однако не всегда устраивает внешний вид при выводе в конце поста. Чтобы добиться нужного вида пропишем новые классы в файле стилей задействованной темы.
Обычно это файл wp-content/themes/название_темы/style.css
Считаем, что плагин Related Posts уже установлен в каталоге Plugins нашего сайта и подключен через админку блога
Сначала зайдем в настройки Related Post: меню Настроки -> Related Post






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