Создать виджет боковой панели «Обо мне» с редактором сообщений [WordPress tutorial]

Большие блоги прекрасно используют страницы «Обо мне». Чтобы привлечь туда пользователей, в 99% случаев они включают краткую интригующую тему «Обо мне» на боковой панели блога. В этом посте я покажу вам, как создать этот раздел. Это так же просто, как написать новый пост. На самом деле, мы будем использовать новый редактор сообщений в WordPress для создания этого.

Почтовый редактор – один из самых универсальных инструментов в WordPress, и вряд ли кто-то знает об этом. То, что я собираюсь показать вам, это хитрый маленький дизайнерский взлом, хитрость, настолько упущенная из виду, что она даже не была включена в список 40 WordPress Hacks на Hongkiat.com.

Этот трюк также отлично подходит для изучения некоторых базовых HTML и CSS, если вы только начинаете.

Рекомендуемое чтение: руководство для начинающих по разработке плагинов WordPress

Создайте ваше сообщение

Все, что вам нужно для этого урока, это ваша страница “Обо мне”, ваша фотография и текст. Ваша страница «Обо мне» должна быть сосредоточена на ваших достижениях в ведении блога, задавать читателю некоторые вопросы и включать фотографии вашего блога. Уже сделали эту страницу? Отлично.

Теперь мы собираемся перенести все это в новый редактор сообщений WordPress. Откройте его и загрузите свое изображение. Мы будем делать большую часть этого на вкладке HTML. Когда вы загружаете изображение, WordPress автоматически генерирует для него HTML-код. Перейдите на вкладку HTML и создайте пробел (нажмите ввод) над изображением. Затем напишите здесь небольшое сообщение, что-то вроде «Кто за этим сайтом?» или даже просто «обо мне». Будь креативным.

Добавьте краткое описание из 3-4 предложений, которое заинтриговало читателя. В конце этого текстового блока напишите предложение типа «Узнайте больше здесь» и создайте ссылку на свою страницу «О нас».

Стиль вашего сообщения

Теперь перейдите на вкладку Visual. Сосредоточьте свой текст. Когда вы вернетесь к HTML, вы заметите, что WordPress написал для вас некоторый код в форме «p-стиля». В этом прелесть создания виджетов в новом редакторе сообщений; WordPress авто-коды для вас! Затем вы просто добавляете базовый CSS!

Создайте что-то вроде этого:

ВАШЕ СООБЩЕНИЕ

Обязательно закройте стиль p с помощью

,

И добавьте любой другой CSS, который вам может понадобиться. Не знаете CSS? Просто поищите в Google «CSS-код для ____» и в пустом месте укажите, что вы пытаетесь сделать. Затем скопируйте и вставьте стиль p. Поместите это вокруг своего текстового сообщения блока ниже изображения. Украсьте его так, как вам нравится, и закройте его. Если вы забудете закрыть стиль p, это не проблема. Стиль будет применяться к большему количеству текста, который вы хотите, но все делают эту ошибку хотя бы один раз.

Используйте коды выделять курсивом и выделите текст и не забудьте закрыть его.

На данный момент мы закончили создавать, и пришло время для веселья.

Поместите свою работу в боковую панель

На вкладке HTML скопируйте и вставьте все, что вы создали. Перейдите на вкладку Внешний вид, виджеты и перетащите пустой текстовый виджет на боковую панель. Вставьте в свой код. Затем нажмите «Сохранить» и перейдите на домашнюю страницу блога. Как это выглядит?

Вы наверняка захотите внести некоторые изменения здесь. Изображение может быть не по размеру, или шрифты могут не отображаться так, как вы себе представляли, но не беспокоиться, вы можете отредактировать все это прямо в виджете «Текст» или, что еще лучше, в своем новом редакторе сообщений, где вы можете просмотреть изменения легче.

Fun Styling Особенности и другие дополнения

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

1. Используйте экзотические цвета.
2. Используйте пунктирную или цветную рамку.
3. Поместите форму «Подтвердить» прямо под вашим текстом. я использую Aweber для этих.
4. Добавьте ссылки на места, где была представлена ​​ваша работа.
5. Брось в шутку или будь таинственным.

Видеоурок

Вы также можете посмотреть видео-урок для этого поста, как показано ниже или на ютубе,

Что дальше?

Теперь, когда у вас есть базовые разделы «Обо мне» и «Обо мне», перейдите в другие блоги, чтобы узнать, какие стратегии и схемы работают для них. Сделайте несколько заметок. Затем проведите еще какое-то исследование ваших собственных читателей.

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

Примечание редактора: это сообщение написано Грегом Нараяном для Hongkiat.com. Грег – 25-летний парень из Нью-Йорка, который отвечает на 150 вопросов блога перед завтраком.