CherryFramework 4. Как добавить кнопку «Подробнее» (‘Read more’) в шорткод Blog Layout

Из этого туториала вы узнаете, как добавить кнопку «Подробнее» (‘Read more’) в шорткод Blog Layout в шаблонах CherryFramework 4.

1. Найдите шорткод на странице

   Сперва следует проверить параметры шорткода, чтобы определить, какие файлы редактировать для добавления кнопки «Подробнее» (‘Read more’). Пожалуйста, найдите шорткод на странице, он будет выглядеть следующим образом:

   [cherry_blog posts_per_page="4" order="DESC" orderby="date" paged="yes" layout_type="grid" filter_type="none" grid_column="grid-4" columns="4" columns_gutter="10" timeline_item_width="48" use_timeline_breakpoint="yes" timeline_breakpoint="month" timeline_breakpoint_date_format="F j, Y" show_marker_date="no" timeline_marker_date_format="F j, Y" pagination_previous_label="" pagination_next_label="" class="grid-type-1" template_type="type-1"]

2. Найдите файл для редактирования

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

   1. Пожалуйста, обратите внимание на параметр layout_type (тип макета), он может принимать такие значения, как «grid» (сетка), «masonry» (кирпичи) или «timeline» (временная шкала). В нашем примере использовано значение ‘grid’.

   2. Затем, пожалуйста, определите тип шаблона — template_type, в нашем случае это ‘type-1’.

   3. Последняя составляющая — тип файла, например, standard (стандартный), image (изображение), gallery (галлерея), и т. д. Поэтому, нам надо найти файл layout-grid-type-1-video.tmpl для добавления кнопки «Подробнее» (‘Read more’) к записи типа video (видео), что выводится на странице посредством шорткода Blog Layout.

   4. Войдите в панель управления на хостинге и выберите инструмент Менеджер Файлов (File Manager) или соединитесь с FTP.

   5. Откройте папку wp-content/themes/monstroid/blog-layouts/tmpl/, где находятся исходные файлы шорткода:

      

   6. Откройте необходимый файл, в нашем примере это layout-grid-type-1-video.tmpl.

3. Отредактируйте файл

   Добавьте код кнопки «Подробнее» после части вывода содержимого меняя следующий код:

   		%%CONTENT%%
   	

   на

   		%%CONTENT%%
   		<div class="read_more">
   			%%BUTTON where="loop"%%
   		</div>
   	

4. Сохраните изменения и обновите сайт, теперь кнопка отображается. Можно также указать пользовательские стили кнопки, используя название класса .read_more в вашем правиле CSS:

   

Вы также можете воспользоваться детальным видео-туториалом: