Шпаргалка для адаптивной верстки

Адаптивная верстка (она же респонсивная верстка — от англ. responsive) делается очень легко, настройки для всех расширений экранов прописываются в одном общем файле стилей.

Сначала пишутся общие стили, например обнуление полей и рамок, свойства шрифта.

А в самом конце css файла обычно прописывают специфические настройки для конкретных экранов, ширина экрана задается так:

1
2
3
4
@media only screen and (min-width: 1382px) {
     display:block;
     width:100%;
}

Логика проста, сначала применяются общие настройки, а потом специфические, зависящие от размера экрана устройства.

Шпаргалка для адаптивной верстки
Продолжить чтение

Маскировка email-адресов на сайте

Маскировка email-адресов на сайте
Если вы задались вопросом, как скрыть свой email-адрес и при этом оставить возможность посетителям вашего сайта связаться с вами по электронной почте, то вы зашли по адресу.

Зачем нужно скрывать свой email-адрес

Базы для рассылки спама собираются специальными роботами-парсерами, они находят в коде сайтов email-адреса и собирают их в базы, по которым в дальнейшем рассылается спам. Чтобы не попасть в такую базу, не стоит открыто отсавлять на сайте свой email-адрес.

также некоторые пользователи не хотят быть найденными в сети по адресу почтового ящика, если email-адрес присутствует на сайте в открытом виде, то он будет проиндексирован поисковыми системами.
Продолжить чтение

Оптимизация графического контента

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

Нужен ли графический контент на сайте

Графический контент на сайте определенно нужен. Он позволяет упростить восприятие текстового контента, удачно дополнить текстовые блоки, разнообразить материалы сайта, а с некоторых пор, графический контент может стать способом привлечения на сайт новых посетителей.

Современный интернет-пользователь избалован большим количеством качественной и интересной информации, причем фраза «многа буков» является девизом многих активных пользователей. С этой точки зрения, мы просто обязаны использовать графический контент на сайте, чтобы заинтересовать аудиторию, которая не воспринимает один лишь текстовый контент.
Продолжить чтение

Пагинация для сайта на WordPress

Пагинацией принято называть постраничную навигацию на сайте. На сайте, материалы которого организованы в виде блога, очень удобна постраничная навигация, она позволяет быстро переместиться к более ранним материалам, а также увидеть самые первые материалы на сайте.

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

Код для вывода топ комментаторов на сайте WordPress с адаптивным дизайном

Код для вывода топ комментаторов на сайте WordPress с адаптивным дизайномРешила добавить в этом блоге вывод лучших комментаторов, и конечно же без участия плагинов, потому что я большая поклонница правила «чем меньше плагинов — тем лучше». Самое лучшее решение нашла у моего любимого SEOлетикатоп комментаторов без плагина в WordPress.

Единственный момент, который меня не устраивал, код SEOлетика генерирует таблицу с определенным количеством столбцов, хоть их число и можно менять по своему усмотрению, но эта настройка не дает возможности вывести топ комментаторов на адаптивном сайте так, чтобы внешний вид смотрелся органично.
Продолжить чтение

О разных способах бекапа сайта на WordPress

О разных способах бекапа сайта на WordPressПрежде, чем писать статью о том, как сделать backup сайта на WordPress, решила посмотреть какие советы на эту тему дают другие блогеры.

Как же я была удивлена и разочарована, увидев тысячи статей, которые советуют установить различные плагины и специальные программы, которые будут автоматически делать резервные копии, копировать сайт по FTP, сохранять бекапы в основную директорию сайта и даже высылать бекап на почту 2 раза в день.

Почему владельцы сайтов выбирают неэффективные способы для резервирования данных?

На мой взгляд это происходит от непонимания как работает сайт на WordPress и каким образом сайт восстанавливается из резервной копии. С понимаем этих основополагающих вещей придет понимание каким образом нужно делать бекап.
Продолжить чтение

Проблемы с сайтами на хостинге Ру-центра

Преблемы с сайтами на хостинге Ру-центраВчера наблюдалась какая-то странная ошибка доступа к сайтам на Ру-центре. С домашнего компьютера я не могла попасть ни на свой сайт, на ни nic.ru, браузер выдавал сообщение что такого сайта не существует. В то же самое время с рабочего компьютера все исправно работало.

Написала о проблеме в группу Ру-центра вконтакте, несколько пользователей прокомментировали мое сообщение аналогичными жалобами и, как ни странно, нам быстро ответили. Ру-центр подтвердил что наблюдаются проблемы доступа к ресурсам со стороны некоторых провайдеров.
Продолжить чтение

Штатная функция WordPress для скрытия email-адресов на сайте

Штатная функция WordPress для скрытия email-адресов на сайтеСуществует множество способов скрыть свой email-адрес, но при этом оставить возможность посетителей сайта связаться с автором, об одном из них, а именно об обфускации email-адреса штатными средствами WordPress, сегодня пойдет речь.

Причины по которым возникает необходимость скрыть свой email-адрес могут разными, как не попадание адреса в индекс поисковых систем, так и нежелание получать спам.

К счастью, разработчики WordPress позаботились о том, чтобы мы могли скрыть email-адрес не затрудняя общение с пользователями. Движок обладает встроенной функцией antispambot(), в ней можно передавать любой адрес электронной почты и получать на выходе тот же самый адрес перекодированный в спецсимволы.
Продолжить чтение

Настройки постоянных ссылок в WordPress

Настройки постоянных ссылок в WordPressМногие начинающие блогеры не придают значения тому, какой вид имеют ссылки на посты в их блоге. Рекомендую озаботиться этим вопросом как можно раньше, чтобы потом не было мучительно больно, то есть чтобы не искать потом хаки и редиректы на более красивые адреса ссылок (ЧПУ).

WordPress универсальный движок и у него есть возможность настроить внешний вид ссылок по своему вкусу. Заходим в Настройки — Постоянные ссылки, как показано на рисунке справа.

В этом разделе представлены варианты отображения ссылок на материалы сайта.

Стандартные настройки для ссылок в WordPress

1. По умолчанию материалы отображаются по внутреннему ID, под этим идентификатором они записываются в базу. Вид у такой записи весьма неприятный, содержание спецсимволов в адресе делают его сложным для понимания и апоминания.
Даже в оригинальной документации http://codex.wordpress.org/Using_Permalinks к WordPress написано, что Default: «Ugly», что дословно означает, что ссылки по умолчанию уродливы.
Продолжить чтение

Устаревшие теги. HTML5 атакует!

Устаревшие теги. HTML5 атакуетВеб-стандарты движутся в сторону жесткого разделения структуры и оформления. С появлением HTML5 и CSS3 это разграничение еще больше усилилось и на фоне этого многие теги и атрибуты были признаны устаревшими, их не рекомендуется использовать при разработке сайтов и веб-приложений.

HTML5. Устаревшие теги

<applet> — добавляет Java-апплет в документ. Вместо него следует использовать <embed> или <object>.

<acronym> — этот тег вызывал постоянные вопросы, что такое акроним и чем он отличается от аббревиатуры. Для упрощения остался единственный тег <abbr>.

<bgsound> — определяет музыкальный файл, который будет проигрываться на веб-странице при её открытии. Для воспроизведения музыки используйте новый элемент <audio>.

<dir> — создает список, содержащий названия директорий, вместо него используйте <ul>.

<frame>, <frameset>, <noframe> — фреймы более не поддерживаются. Если они вам требуются, используйте другую версию HTML или <iframe> совместно со стилями.
Продолжить чтение