Ваш промокод mojWPAds на плагин рекламы для WordPress >>

Информация об авторе сайта без плагина

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

Если Вам жалко тратить свое время на ручную правку и настройку, то можете воспользоваться плагином About Me 3000 widget, который сделает нечто подобное. Те же из Вас, кто готов уменьшить нагрузку на сервер своего сайта, путем исключения еще одного плагина, читайте далее.

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

информация об авторе сайта

Здесь мы видим: мое лицо, текст "Добавляйте меня в свой круг на Google+", красную кнопку и мое имя и фамилию. Вы же можете поместить сюда любой текст и картинку, после того как ознакомитесь с кодом.

Итак... Идем в админку сайта, далее Внешний видВиджеты и добавляете стандартный виджет Текст в то место сайта, где хотите видеть информацию о себе. Ввиду того, что данный виджет идет по умолчанию с каждой сборкой WordPress и он поддерживает HTML, мы можем говорить о том, что на сайте используется на один плагин меньше (имеются ввиду плагины Об авторе).

А теперь код, на примере которого я поясню, что и как делать:

<img align="left" src="http://mojwp.ru/wp-content/uploads/2012/03/mojwp-image.jpg"
 style="width:80px; height:80px; border:2px solid #333333; ">
<span style="font-size: 15px; line-height: 1.3em;">Добавляйте меня в свой круг
 на Google+</span><br/><form style="background: #DD4B39; border: 1px solid #CCCCCC;
 border-radius: 3px 3px 3px 3px;  float: left; padding: 6px 8px;
margin:9px 2px 10px 2px;"><a href="https://plus.google.com/107978573013111120344/posts"
 target="_blank" rel="nofollow" style="font-size: 1.3em;text-decoration: none;">
в круг Google+</a></form><br/><br/><span style="margin: 6px 0 5px 5px; color:#ffffff;
 font-weight: bold; font-size: 15px;">Имя Фамилия 
<font color="#1AE639">mojWP</font></span>

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

Часть 1: как вывести фотографию автора сайта в сайдбар

Прежде всего необходимо определиться с фотографией, либо графическим рисунком, который Вы хотите отобразить. В моем случае был выбран квадратный, размером 80*80px. Вы же можете выбрать любого размера, главное не сильно большого, чтобы подгружался быстро. В случае чего размер можно подкорректировать в какой-либо графическом редакторе (Photoshop, Paint, IrfanView и прочих). Эту фотографию необходимо загрузить к себе на сайт, либо на бесплатный хостинг фотографий. В итоге мы должны получить ссылку на нее.

Далее в виджет "Текст" помещаем следующее:

<img align="left" src="http://mojwp.ru/wp-content/uploads/2012/03/mojwp-image.jpg"
 style="width:80px; height:80px; border:2px solid #333333; ">

где:

  • 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+". В коде это выводит следующее:

<span style="font-size: 15px; line-height: 1.3em;">Добавляйте меня в свой круг
 на Google+</span><br/>

При помощи тега span мы назначаем свой стиль (style) отображения строчным элементам. Как и ранее, поясняю:

  • font-size: 15px - размер шрифта. Подберите оптимальный для себя, путем изменения цифр;
  • line-height: 1.3em - межстрочный интервал. Так же подбирайте оптимальный, чтобы все смотрелось гармонично;
  • color:#dddddd - цвет шрифта. У меня он не указан, но Вы можете воспользоваться, если есть необходимость выделить другим цветом.

Настройка данного блока закончилась. В самом конце стоит <br/>, что обозначает переход на новую строку.

Часть 3: создаем форму кнопки

В моем примере я сделал кнопку, отдаленно похожую на ту, которую предлагает сам Google+. Данный шаг позволил избавиться от еще одной картинки, что положительно сказывается на скорости загрузки сайта. При желании, Вы можете поместить необходимые картинки социальных сервисов, воспользовавшись параметрами из "Часть 1: как вывести фотографию автора сайта в сайдбар". Это фактически то же самое, только с большим количеством фотографий.

Для тех же, кому интересно знать, как создана такая кнопка у меня, следующий код:

<form style="background: #DD4B39; border: 1px solid #CCCCCC;
 border-radius: 3px 3px 3px 3px;  float: left; padding: 6px 8px;
margin:9px 2px 10px 2px;"><a href="https://plus.google.com/107978573013111120344/posts"
 target="_blank" rel="nofollow" style="font-size: 1.3em;text-decoration: none;">
в круг Google+</a></form>

Здесь все известные параметры, за исключением следующих:

  • background: #DD4B39 - цвет фона;
  • border-radius: 3px 3px 3px 3px - закругление углов формы в соответствующих местах (поддерживается современными браузерами). Для старых браузеров может понадобиться дополнительные параметры. Их можно найти в статье Хаки WordPress — красивый текстовый блок на шаге №2;
  • float: left - прижимает кнопку влево. Вам данный параметр может не понадобиться. Поэтому вначале попробуйте без него. Если же кнопка будет растянута слева направо, то тогда впишите и его.
  • font-size: 1.3em- размер шрифта. 1.3em равняется 13px;
  • text-decoration: none - с помощью этого параметра я убрал подчеркивание в ссылке. Может принимать разные значения, о чем можно прочитать ЗДЕСЬ.

Часть 4: имя и фамилия автора

Здесь все аналогично с "Часть 2: оформляем текст, побуждающий добавить в круг".

<br/><br/><span style="margin: 6px 0 5px 5px; color:#ffffff;
 font-weight: bold; font-size: 15px;">Виталий Бургомистров 
<font color="#1AE639">mojWP</font></span>

Послесловие

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

Видео для тех, кто дочитал до конца. Прекрасная песенка от шотландской певицы Amy MacDonald

Привет.

Меня зовут Виталик. Я автор этого блога и Магазина WordPress https://wp-r.ru/.


Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 16 комментариев
  1. Вика says:

    Прикольно! Первый раз встречаю рубрику 'Украшение'. 🙂

  2. Александр MaDDogg says:
    http://time-for-android.ru/

    Спасибо за подробную инструкцию, узнал немного нового. Но хочу сказать, что сейчас многие темы поддерживают виджеты, который позволяет в 3 шага установить блок в любом месте ( например скажем в правой колонки меню ) пустой блок, с возможностью в нём писать обычный текст, или html , и даже выполнять php код.
    Но, например кто не захочет менять свою тему, без вышеописанной функцией, то спокойно может воспользоваться примером описанный вами в этой записи.

  3. Ольга says:
    http://olgaromantika.blogspot.com/

    Хорошо изложена информация. Даже мне - новичку удалось разобраться)

  4. weffer says:

    А у меня не получилось. Вставил для примера ваш код из статьи - рамка вокруг виджета почему то совсем не отображается и надпись "Виталий, он же mojWP" не под кнопкой G+ а сбоку от неё начинается. Что мне нужно править чтобы как у вас смотрелось?

    • Виталий says:

      все)))
      представленный код подходит только для моего шаблона.
      у вас шаблон другой, поэтому в помощь CSS. В статье расписано что к чему

      • weffer says:

        да я это в принципе понимаю. сейчас буду копаться. я вот не пойму только почему рамка вокруг этого виджета не отображается совсем. ведь в коде ясно прописано - border: 1px solid #CCCCCC;

        • Виталий says:

          значит что-то ее блокирует в стилях
          адд-он к firefox или chrome под названием FireBug поможет найти причину

          • weffer says:

            FireBug стоит, но я мало что в нём вижу. ладно, благодарю, буду разбираться.

  5. Гулзира says:
    http://vkusnoedoma.ru

    Одно время такая "штучка" у меня "украшала" правый сайдбар на блоге. А потом убрала.. Теперь поставила подписку на рассылку:))

  6. Nurlan says:
    http://maks-1.com

    Очень полезный и информативный пост. Все написано понятно, доходчиво. Воспользовался вашим кодом. Спасибо.

  7. Евгения says:
    http://lebeddeva.ru

    Все очень подробно описано. У меня все получилось. спасибо за нужную информацию. Вообще на вашем ресурсе очень много полезностей, с удовольствием читаю Ваши обновления по RSS.

  8. Dmitry says:
    http://wpnice.ru/

    Думаю, давно уже надо выводить в сайдбаре и автора с его инфой и контактную форму заодно, чем отдельную страницу делать.
    А песенка в клипе отличная, утащил к себе:)

  9. Вячеслав says:
    http://free-fish.ru

    Отличный способ, обязательно попробую. Спасибо!

  10. Алевтина says:
    http://moiblog.orifort.ru/

    Всё как в первом классе, понятно и доступно. Остался всего один вопрос, а как всё это сделать на цветном фоне, как-то всё сливается с общим видом

    • Виталий says:

      возьмите всю конструкцию в блок и задайте цвет заднего фона:

      <div style="background:#AC1A13;">внутри все из cтатьи</div>
  11. Александр says:
    http://vachzdrav.ru

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

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2017 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 12.56MB | MySQL:121 | 0,264sec
Лучшие плагины для сайта WordPress
Магазин WordPress WP-R.ru
Я понял, не показывай больше.
Смотри мои обучающие видео на YouTube
Сайт использует cookie
Друг, не уходи!