mojwp.ru
Назад

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

Опубликовано: 22.03.2012
16
473

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

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

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

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

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

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

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


Добавляйте меня в свой круг
 на Google+
в круг 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: как вывести фотографию автора сайта в сайдбар". Это фактически то же самое, только с большим количеством фотографий.

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

в круг Google+

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

  • 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

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • Вика
    Опубликовано: 04.06.2012 Ответить на сообщение

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

  • Александр MaDDogg
    Опубликовано: 30.06.2012 Ответить на сообщение

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

  • Ольга
    Опубликовано: 10.07.2012 Ответить на сообщение

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

  • weffer
    Опубликовано: 23.07.2012 Ответить на сообщение

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

    • Виталий
      Опубликовано: 23.07.2012 Ответить на сообщение

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

      • weffer
        Опубликовано: 23.07.2012 Ответить на сообщение

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

        • Виталий
          Опубликовано: 23.07.2012 Ответить на сообщение

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

          • weffer
            Опубликовано: 23.07.2012 Ответить на сообщение

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

  • Гулзира
    Опубликовано: 02.08.2012 Ответить на сообщение

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

  • Nurlan
    Опубликовано: 21.08.2012 Ответить на сообщение

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

  • Евгения
    Опубликовано: 23.10.2012 Ответить на сообщение

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

  • Dmitry
    Опубликовано: 25.10.2012 Ответить на сообщение

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

  • Вячеслав
    Опубликовано: 22.12.2012 Ответить на сообщение

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

  • Алевтина
    Опубликовано: 05.02.2013 Ответить на сообщение

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

    • Виталий
      Опубликовано: 05.02.2013 Ответить на сообщение

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

      внутри все из cтатьи
  • Александр
    Опубликовано: 23.03.2013 Ответить на сообщение

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.