Как переделать внешний вид главной страницы блога?

4 комментария

Главная страница блога

Еще недавно на главной странице этого блога отображалась просто верхняя часть статьи до тега <!—more—>. Если на компьютере это еще хоть как-то выглядело, то на мобильнике все ЭТО приходилось прокручивать вниз, чтобы перейти на следующую страницу. Со временем это начало меня раздражать . Очень захотелось, чтобы отображение сайта на мобильном устройстве работало правильно.

Для начала расскажу, в чем разница между уткой функцией the_content() и the_excerpt().

  • the_content() — функция, возвращающая текст статьи вместе с картинками до тега

  • the_excerpt() — функция, возвращающая первые 55 слов при отсутствии заполненного поля «Цитата» или цитату, если она заполнена

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

Там, где ранее был the-content(), необходимо вставить the_excerpt(). Также неплохо не просто оставить кликабельный заголовок записи, но и добавить ссылку «Читать далее». В противном случае приглашение прочитать статью будет выглядеть примерно так:

Ссылка на статью

Вроде бы вход есть, но какой-то странный  .

Часть кода страницы теперь выглядит так:

Кратко прокомментирую код. Это заголовок статьи.

Этот код требует отображать миниатюру для записи, если такая существует:

Прошу обратить особое внимание на параметры функции the_post_thumbnail. Первый параметр отвечает за размер миниатюры. Можно указать ключевое слово, как в моем примере, а можно указать конкретный размер изображения.

Используемые ключевые слова:

  • thumbnail — 150х150 (как в примере)
  • medium — 300х300
  • large — 640х640
  • full — исходный размер картинки

Задать конкретный размер изображения можно, поставив в качестве первого параметра array (width, height), где width — это заданная Вами ширина изображения, например, 50, и height — заданная Вами высота изображения, например, 100.

Второй необязательный параметр функции the_post_thumbnail — это массив из строковых значений. Как правило, сюда подставляют оформление картинки, как и сделано в примере.  Ее размещение на странице регулируется классом css, заданном в параметре ‘class’, у меня это ‘content-miniature’  .

Одни из последних строчек кода отображают ссылку «Читать далее» строго на новой строке:

В классе css «readmore» записано всего-навсего style=»clear:left;».

Вроде бы все сделали, но опять ничего не работает

Перед нами на главной странице блога отобразились последовательно выведенные начальные абзацы наших записей, оборванные на полуслове символами  […] и без картинок!!! Где же наши картинки?! 

Чтобы все заработало, необходимо выяснить несколько вещей:

  1. Включена ли поддержка миниатюр в Вашем шаблоне?
  2. А есть ли вообще у записи ее миниатюра?
  3. Есть ли цитата у статьи?

Пройдемся последовательно по данным пунктам.

Включение миниатюр в шаблоне WordPress

Находим файл functions.php Вашего шаблона и перед символами ?> пишем такие строки:

Теперь, когда Вы редактируете свою статью, в правом нижнем углу Вы сможете видеть такой виджет:

Миниатюра к записи WordPress

Вывод миниатюры у записи

Если щелкнуть по ссылке «Задать миниатюру», то откроется окно выбора картинки:

Загрузка миниатюры в запись

По умолчанию открыта вкладка «Библиотека файлов», в которой доступен выпадающий список источника картинки. Если картинка уже находится в статье, то логичнее выбрать пункт «Загруженные для этой записи», не придется искать нужную среди 100500 других картинок .

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

Цитата записи WordPress

Чтобы задать цитату записи WordPress, необходимо ее куда-то записать  . Так… Где это в редакторе записи?.. А нет такого!

Чтобы включить область ввода цитаты в редакторе записи, нужно найти в самом верху страницы редактора ссылку «Настройки экрана».

Включить набор цитаты на блоге

После этого (а ЭТО может затянуться, сама не сразу нашла) необходимо щелкнуть по меню и в показавшейся области поставить галочку «Цитата».

Включить набор цитаты на блоге

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

P.S.

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

P.S.S.

А на блоге новые смайлики! 


4 комментария “Как переделать внешний вид главной страницы блога?”

  1. seoonly.ru

    Спасибо за советы-)

    Ответить
    • Admin

      Не за что! Лишь бы все работало! http://noservice.ru/wp-content/plugins/wp-monalisa/icons/bf.gif

      Ответить
  2. Stankopil.ru

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

    Ответить
    • Admin

      Добрый вечер! А где можно почитать статью? На том сайте, на который Вы оставили ссылку, увы, все про ленточные пилы и станки http://noservice.ru/wp-content/plugins/wp-monalisa/icons/aa.gif.

      P.S. Вижу, с какого сайта коммент скопипастен, так что вопрос не имеет смысла =)))

      Ответить

Оставьте комментарий

XHTML: Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url=""> <img src="" alt="" class="" width="" height="">

http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ab.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ac.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ag.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ah.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ai.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ak.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/am.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/an.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ao.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/aq.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ar.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/at.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/av.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/aw.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ay.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/az.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/bb.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/bc.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/bd.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/be.gif 
больше...