Различные фишки и приемы с использованием CSS всегда привлекали и привлекают мое внимание. В их числе находится и способ закругления углов блока без использования какой-либо графики.
Мне данный подход очень понравился, но единственное, что сдерживало от применения оной методики - такие углы не выглядят сглаженными (да, вот такой я привередливый :). А этого мне не хватало, поэтому решил пойти до конца, доработав имеющийся вариант.
Итак, моя задача заключалась в реализации с помощью CSS вот такой рамки, абсолютно не используя изображения:
Если вы периодически монитерите РУнет на предмет наличия статей о различных CSS-ных штучках, то вам наверняка попадалась техника создания заголовка с помощью обычного текста и одного полупрозрачного изображения-градиента в формате PNG.
Вот пример, который я имею в виду. Если коротко, то работает это следующим образом. Имеется вот такой заголовок с отдельно вложенным контейнером:
<h1>Заголовок<b></b></h1>
Контейнер <b></b> позиционируется поверх текста и в его фон помещается полупрозрачный градиент, который закрывает текст наполовину.
Узнал о забавной финтифлюшке, которую можно применить на сайте, работающем на движке WordPress.
С помощью специального php-кода, вставляемого в файл шаблона, плюс чуток CSS, на странице результатов поиска можно реализовать выделение слов, совпадаемых с поисковым запросом.
Ниже рассказываю, каким образом это делается. Для осуществления задачи нам потребуется файл search.php.
Если у вас на сайте используется поиск, но в папке с шаблоном сайта нет файла search.php, то прошу вас самостоятельно изучить вопрос о том, какие необходимы изменения в шаблоне, чтобы они отобразились только на странице результатов поиска.
Бесплатные темы максимально просты в установке. Вы просто загружаете тему, активируете ее, и все готово. Она знает имя вашего блога, описание, адреса фидов и все остальное.
Для получения всех этих данных в теме используются PHP вставки. И эти теги используются при каждой загрузке страницы.
Так как большая часть элементов блога никогда не меняется, вы можете удалить соответсвующие куски кода PHP и заменить их обычным текстом. Таком образом, серверу нужно будет выполнять меньше PHP кода.
13 нежелательных PHP вставок в темах WordPress
Простейший путь замены PHP вставок - загрузить страницу и посмотреть ее исходный код. Теперь найдите в коде страницы ниже следующие теги. Теперь замените PHP вставки соответсвующим текстом, взятым из исходного кода. Читать далее »
Совет №20 — Не блокируйте доступ поисковых роботов!
Призовой совет №1 - Комментарии разрешены?
Совет №19 — Ваш блог тематический?
Совет №18 — Канонизируйте все URL
Совет №17 — Проверьте код XHTML на валидность
Совет №16 - Не транжирьте “сок ссылок”!
Совет №15 — Используйте изображения в статьях
Совет №14 — Ваша тема (шаблон) правильно использует заголовочные теги?
Совет №13 — Используйте пингование
Еще один призовой совет: Несмотря на то, что статья опубликована, WordPress отправляет пинги при каждой модификации содержания статьи. Постарайтесь поменьше изменять публикации, чтобы не попасть в категорию пинг-спамера.
Я никогда не приветствовал и не приветствую то, когда сторонние скрипты и плагины, используемые на сайте, без моего ведома загружают различную информацию с третьих сайтов.
Сюда относится и “Доска объявлений” WordPress, на которой по дефолту импортируется ну никаким боком не нужная мне информация, типа новости WordPress, входящие ссылки, последние записи с блога разработчиков WordPress и информация о плагинах, которая, к тому же, увеличивает размер базы данных.
Если мне понадобится такая информация, я сам найду ее без проблем - ну зачем ее впихивать в дашбоард? Правильнее было бы по умолчанию сделать эти блоки неактивными и дать возможность пользователю самостоятельно их активировать, если он того захочет. Читать далее »
Попробую-ка пролить ясность в этом вопросе, поскольку он не такой простой, как кажется на первый взгляд. За сухим «ping и traсkbaсk - технологии, позволяющие взаимодействовать сайтам между собой», мало что становится понятно. Так что по-порядку.
Основная идея
Суть взаимодействия между сайтами очень проста: вы посылаете какому-то сайту определенный запрос, тот его анализирует и, если нужно, выполняет определенное действие, например публикует ваш запрос как комментарий. То есть когда вы хотите оставить комментарий к чужой статье на своем сайте, все что вам нужно сделать, так это указать адрес чужого сайта. Читать далее »
Wordpress - система управления контентом CMS, предназначенная для создания сайтов, в основном, ориентированная на блоги.
Установка:
Скачать Wordpress (например, с нашего сайта или официального сайта wordpress.org, или локализацию)
Закачать wordpress на Ваш хостинг (либо распаковать архив с Wordpress у себя на компьютере и закачать файлы, либо закачать на сервер архив (tar или zip) и распаковать его уже на сервере)
Вывод облака меток или [Tag Cloud] Синтаксисwp_tag_cloud();Функция wp_tag_cloud() возращает и выводит «облако тегов», и позволяет пользователям просматривать самые читаемые и просматриваемые темы публикаций блога WordPress.
Для организации выода, данная функция может принимать следующие параметры: smallest
Параметр, определяющий размер текста тега с наименьшей оценкой значимостью.
Синтаксис wp_tag_cloud(‘smallest=10’);Читать далее »
WordPress-сайта, то, согласитесь, было был гораздо удобнее иметь на каждой странице сайта блок с прямыми ссылками в админку на часто выполняемые задачи, например, ссылку на страницу создания новой записи или страницу модерации комментариев.
Расскажу, как интегрировать такое меню. Причем, его будете видеть только вы, как администратор, после того, как авторизуетесь в админке.
Это меню можно либо интегрировать в сайдбар, чтобы оно выглядело аналогично другим блокам, либо зафиксировать в пустом пространстве страницы, как это сделано у меня:
Однажды я уже писал о таком скрипте, но он оказался не совершенен, и в результате я им так и не стал пользоваться. Однако задача найти подходящий скрипт для авторастяжки этого поля все-таки стояла передо мной.
И я нашел красивое решение, в виде . Проверял его в разных браузерах, в целом все нормально, заметил только один недочет - в Опере появляется горизонтальная прокрутка. Читать далее »
Одна из интересных возможностей спецификации CSS3, которая может использоваться уже сегодня - это псевдоэлемент ::selection, позволяющий изменять цвет фона выделенного текста, заданный в вашей операционной системе, на любой другой цвет по вашему усмотрению.
На данный момент ::selection поддерживают следующие браузеры:
Safari
FireFox
Opera 9.5 (начиная с билда 9770).
Safari несколько по-другому отображает результат в сравнении с FireFox и Opera (последние два браузера обрабатывают этот псевдоэлемент идентично).
Давайте представим, что у нас есть специальная страница, содержащая одно или несколько больших изображений, и мы хотим дать знать посетителю, что изображение загружается. Для этой цели можно было бы использовать Javascript, который выводил бы иконку предзагрузки для всех изображений, которые еще не загрузились.
Однако, у нас есть намного более простой способ достичь того же самого, особенно, если на странице выводится множество больших изображений.
1. Находим иконку предварительной загрузки
Существует много сайтов, позволяющих создавать свои собственные изображения предзагрузки. Например, вот . Только не забудьте обратить внимание на то, что это изображение (размер файла) не должно быть слишком большим. Пусть будет такое:
Борьба со спамом - это то, с чем сталкивается почти каждый владелец сайта, на котором разрешено комментирование. Самый популярный и эффективный (?) способ борьбы со спамом - использование специального изображения капча, информацию с которого комментатор должен ввести в предусмотренное для этого поле. С тех пор, как появились алгоритмы OCR, которые позволяют распознавать текст на изображении, на капчах стали выводить “грязный” и искаженный текст.
Для справки:
OCR (англ. Optical Character Recognition - Оптическое распознавание символов) - механическая или электронная конвертация изображений символов и букв в текст, редактируемый на компьютере. Перевод осуществляется программным путём, после получения изображения со сканера или фото.
Текст, преобразованный из графической формы в символьную (текстовую), можно далее обрабатывать любыми текстовыми редакторами.
Многие меня будут критиковать, говоря о том, как я мог поставить именно эти 2 разные версии wordpress в один ряд. Постараюсь объяснить, на мой взгляд, версия wordpress 2.3.3 является самой удачной из всех, версии которые выходили позже, а в частности самая свежая на данный момент - wordpress 2.6.1, довольно сильно перегружает центральный процессор сервера. Конечно, если у вас свой сервер, то вам не стоит ничего бояться, но если вы снимаете хостинг на котором много других сайтов, то думаю, сообщение о том, что ваш сайт сильно загружает сервер, не заставит себя ждать. Читать далее »
Последние комментарии