Информация об авторе сайта без плагина
Посещая сайты и блоги, Вы обращали внимание, что некоторые авторы выводят информацию о себе в сайдбаре (боковой колонке) сайта. Данный шаг позволяет повысить уровень доверия читателя к автору, путем раскрытия информации о последнем. Отобразить подобное можно при помощи плагина, либо ручной вставкой необходимого текста. Сегодня я покажу, как вывести информацию об авторе, его фотографию и социальные контакты, притом без использования плагина.
Если Вам жалко тратить свое время на ручную правку и настройку, то можете воспользоваться плагином About Me 3000 widget, который сделает нечто подобное. Те же из Вас, кто готов уменьшить нагрузку на сервер своего сайта, путем исключения еще одного плагина, читайте далее.
На примере я покажу и расскажу, что и где следует менять, чтобы Вы смогли все настроить под дизайн своего сайта. В качестве наглядного примера будет вот такое:
Здесь мы видим: мое лицо, текст "Добавляйте меня в свой круг на Google+", красную кнопку и мое имя и фамилию. Вы же можете поместить сюда любой текст и картинку, после того как ознакомитесь с кодом.
Итак... Идем в админку сайта, далее Внешний вид ► Виджеты и добавляете стандартный виджет Текст в то место сайта, где хотите видеть информацию о себе. Ввиду того, что данный виджет идет по умолчанию с каждой сборкой WordPress и он поддерживает HTML, мы можем говорить о том, что на сайте используется на один плагин меньше (имеются ввиду плагины Об авторе).
А теперь код, на примере которого я поясню, что и как делать:
Добавляйте меня в свой круг
на Google+
Имя Фамилия mojWP
Успокою тех, кто сразу испугался этого набора букв и цифр. Сейчас будем подробно блок за блоком разбираться, в результате чего получим представленный выше код.
Часть 1: как вывести фотографию автора сайта в сайдбар
Прежде всего необходимо определиться с фотографией, либо графическим рисунком, который Вы хотите отобразить. В моем случае был выбран квадратный, размером 80*80px. Вы же можете выбрать любого размера, главное не сильно большого, чтобы подгружался быстро. В случае чего размер можно подкорректировать в какой-либо графическом редакторе (Photoshop, Paint, IrfanView и прочих). Эту фотографию необходимо загрузить к себе на сайт, либо на бесплатный хостинг фотографий. В итоге мы должны получить ссылку на нее.
Далее в виджет "Текст" помещаем следующее:
где:
- img - это тег HTML, который говорит нам о том, что здесь будет размещаться фотография (картинка);
- src="http://путь_до_фотографии" - здесь мы указываем путь до фотографии, т.е. эта та ссылка, которую мы чуть ранее получили;
- align="left" - данный параметр говорит о том, что основной контент (текст, кнопки и т.п.) будет обтекать картинку слева. При желании, можете сделать справа (right), либо вообще удалить данный параметр, в результате чего фотография станет сверху;
- style="параметры" - в стилях мы будем указывать дополнительные параметры, такие как: рамка, отступы, ширину, высоту и прочее;
- width:80px - ширина картинки. Изначально она была 100px, но мне пришлось ее немного подогнать вручную, чтобы все смотрелось гармонично. Вы задаете свое значение, притом саму картинку менять на хостинге нет надобности;
- height:80px - высота картинки. Все аналогично с предыдущим пунктом;
- border:2px solid #333333 - рамка вокруг фотографии. Здесь: 2px - ширина рамки (можете менять по усмотрению); solid - обозначает, что рамка будет непрерывной (можно так же другого стиля, о котором узнаете здесь http://htmlbook.ru/css/border); #333333 - это цвет рамки (подбирайте под дизайн своего сайта). если не знаете какой цвет у того, или иного элемента Вашего сайта, то воспользуйтесь программой FastStone Capture, у которой есть "Пипетка".
Именно эти настройки позволили мне сделать фотографию в том виде, который представлен выше. Однако Вам могут понадобиться еще 2 параметра, которые я не указывал. Все зависит от шаблона Вашего сайта. Помещаются они так же в style (не забывайте ставить ; между параметрами):
- margin:1px 2px 3px 4px - внешний отступ от элемента (в данном случае img). Здесь соответственно: 1px - отступ сверху, 2px - отступ справа, 3px - отступ снизу, 4px - отступ слева;
- padding:1px 2px 3px 4px - внутренний отступ. Остальное аналогично с предыдущим пунктом.
С фотографией закончили. Переходим к тексту.
Часть 2: оформляем текст, побуждающий добавить в круг
Здесь речь пойдет о следующем элементе, который отображает текст справа от картинки и гласит "Добавляйте меня в свой круг на Google+". В коде это выводит следующее:
Добавляйте меня в свой круг
на Google+
При помощи тега span мы назначаем свой стиль (style) отображения строчным элементам. Как и ранее, поясняю:
- font-size: 15px - размер шрифта. Подберите оптимальный для себя, путем изменения цифр;
- line-height: 1.3em - межстрочный интервал. Так же подбирайте оптимальный, чтобы все смотрелось гармонично;
- color:#dddddd - цвет шрифта. У меня он не указан, но Вы можете воспользоваться, если есть необходимость выделить другим цветом.
Настройка данного блока закончилась. В самом конце стоит <br/>, что обозначает переход на новую строку.
Часть 3: создаем форму кнопки
В моем примере я сделал кнопку, отдаленно похожую на ту, которую предлагает сам Google+. Данный шаг позволил избавиться от еще одной картинки, что положительно сказывается на скорости загрузки сайта. При желании, Вы можете поместить необходимые картинки социальных сервисов, воспользовавшись параметрами из "Часть 1: как вывести фотографию автора сайта в сайдбар". Это фактически то же самое, только с большим количеством фотографий.
Для тех же, кому интересно знать, как создана такая кнопка у меня, следующий код:
Здесь все известные параметры, за исключением следующих:
- background: #DD4B39 - цвет фона;
- border-radius: 3px 3px 3px 3px - закругление углов формы в соответствующих местах (поддерживается современными браузерами). Для старых браузеров может понадобиться дополнительные параметры. Их можно найти в статье Хаки WordPress — красивый текстовый блок на шаге №2;
- float: left - прижимает кнопку влево. Вам данный параметр может не понадобиться. Поэтому вначале попробуйте без него. Если же кнопка будет растянута слева направо, то тогда впишите и его.
- font-size: 1.3em- размер шрифта. 1.3em равняется 13px;
- text-decoration: none - с помощью этого параметра я убрал подчеркивание в ссылке. Может принимать разные значения, о чем можно прочитать ЗДЕСЬ.
Часть 4: имя и фамилия автора
Здесь все аналогично с "Часть 2: оформляем текст, побуждающий добавить в круг".
Виталий Бургомистров
mojWP
Послесловие
На этом с настройками все. Если что-то не получилось, то не спешите писать сразу мне на почту, а вначале перечитайте внимательно статью и пройдитесь по всем пунктам повторно. В случае, когда ничто не помогает, пишите в комментариях - помогу всем, по мере возможностей.
Видео для тех, кто дочитал до конца. Прекрасная песенка от шотландской певицы Amy MacDonald