Наверх

Что общего у масонов и JavaScript?

Автор kbaott, 01.08.2014 | Просмотров: 1 641 |

Всем привет! В одном из предыдущих постов я рассказывал как дорабатывал новую тему оформления блога, наивно полагая, что все важные работы уже сделаны. Но, как оказалось, работы еще было много. Причем большую ее часть я сам себе создал. Но обо всем по порядку. В этом посте я затрону следующие вопросы:

  • как внедрить в тему оформления новые фишки WordPress — форматы записей;
  • как исправить проблемы позиционирования блоков в скрипте Masonry;
  • как внедрить Masonry на любой сайт.

Итак, что же общего у масонов и JavaScript? Оказывается есть общая точка соприкосновения! Я надеюсь, все знают, кто такие масоны. Если нет, то вот краткое определение:

Масоны или франк-масоны — в буквальном переводе «вольные каменщики», движение, возникшее в XVIII веке в виде закрытой организации. Масонство берёт своё начало из малоизвестных истоков в конце XVI — начале XVII века, предположительно — оперативных цехов каменщиков. Вся деятельность масонов очень символична, очень много связано с архитектурной символикой и одним из основных символов является пирамида с усеченным верхом.

Я очень сильно интересуюсь масонами и всем, что с ними связано. Это очень интересно. Хотелось бы пообщаться с настоящим масоном (но не с таким, кто просто ради «понтов» именует себя вольным каменщиком, а именно  с настоящим мастером). Но не в этом дело. А в том, что в теме оформления Pinbin используется скрипт, которые заставляет блоки с анонсами записей выстраиваться как кирпичики. Это сейчас очень популярный стиль, для реализации такого эффекта используются разные способы, но одним из самых лучших несомненно является  JavaScript Masonry.

Официальный сайт этого яваскрипта masonry.desandro.com, демонстрирует как он работает и показывает как его подключать к сайту. Причем это может быть любой сайт, не обязательно WordPress, а и DLE или вообще статичный HTML. Но стоит сказать, что в WordPress с последних версий (с 3.8, если не ошибаюсь) скрипт Masonry уже включен в состав базового пакета. Но как уже было сказано — обо всем по порядку.

Как внедрить в тему оформления WordPress поддержку форматов записей?

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

Но если вы обновляете свой WordPress, то форматы записей можно внедрить в тему причем сделать это несложно. Итак, первым делом открываем файл functions.php вашей темы оформления и добавляем в него следующий код:

add_action( 'after_setup_theme', 'slug_post_formats' );
function slug_post_formats() {
    add_theme_support(
        'post-formats', array(
            'aside', 'image', 'video', 'audio', 'quote', 'link', 'gallery', 'chat', 'status',
        )
    );
}

2014-08-01 00-34-00 Редактировать запись ‹ kbaott.net — WordPress - Opera

2014-08-01 00-25-55 Добавить запись ‹ kbaott.net — WordPress - OperaЭтот код можно вставить в любое место файла functions.php, главное чтобы не в разрыв какой-нибудь функции. Если все сделано правильно, то при создании новой записи у вас должен появится новый блок «Формат», если его нет, то откройте меню «Настройки экрана» вверху и отметьте галочкой искомый блок.

Но эта функция не будет работать, пока в папке с темой не появятся специальные файлы, с названиями типа content-нечто.php — в названии файла «нечто» это указание на то, шаблоном какого именно формата будет этот файл.

Они могут быть:

  • content-aside.php — обычно отображается без заголовка. Похожа на обновление статуса в Facebook
  • content-audio.php — аудиофайл;
  • content-chat.php — запись чата, что-то типа как на башорге;
  • content-gallery.php — собственно галерея;
  • content-image.php — одна картинка;
  • content-link.php — ссілка;
  • content-quote.php — цитата;
  • content-status.php — статус, как в твиттере;
  • content-video.php —  видео,
  • content.php — стандартная запись.

Форматы не обязательно использовать все, а можно указать в коде выше только те, которые вам нужны например, если вам нужно только видео, одна картинка и галереи, то вставляем в functions.php такой код:

add_action( 'after_setup_theme', 'slug_post_formats' );
function slug_post_formats() {
    add_theme_support(
        'post-formats', array(
            'image', 'video', 'gallery', 
        )
    );
}

Ну и файлы вам нужны тоже только те, которые указаны в строке: content-image.php, content-video.php и content-gallery.php плюс content.php для обычных записей. Откуда же взять эти файлы? Можно выдрать их из темы оформления TwentyFourteen (или любой другой поддерживающей форматы, например, Crates) и потом доработать. Просто скачайте эту тему себе на компьютер, возьмите нужные вам файлы и залейте на сервер в папку со своей темой оформления. После этого они появятся в консоли в разделе Внешний вид -> Редактор. Кроме того, что эти файлы нужно привести к необходимому формату, нужно еще и создать стили в файле style.css.

Это кропотливая работа, но она окупится сторицей. Покажу примеры таких файлов (примерно такие использую я на этом блоге):

Файл content-status.php:

<div id="post-<?php the_ID(); ?>">
	<article>
		<span style="color:#999"><em><?php the_excerpt(); ?></em></span>
	</article>
</div>

Файлы content-video.php и content-gallery.php совершенно одинаковые:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<article>
		<?php the_content (); ?>
	</article>
</div>

Файл content.php:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<?php if ( has_post_thumbnail() ) { ?>
		<div class="thumb-image"></div>  <!--  миниатюра //-->
			<p><?php the_category(', ') ?></p>
		<?php } ?>
       		<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
                                <?php the_excerpt(); ?> 
		<p><a href="<?php the_permalink() ?>">Далее...</a></p>
</div>

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

Если тут возникают сложности или что-то непонятно — справшивайте в комментариях помогу чем смогу.

Ну вот форматы записей внедрены и прекрасно работают. Но не тут-то было… Работают-то они хорошо, но вот со скриптом Masonry они дружить не захотели. Например, при вставке галереи используя соответствующий формат записи, под галереей появлялось огромное пространство, примерно той же природы, что из предыдущего поста, где я говорил о странных разрывах между анонсами при использовании веб-шрифтов от Google Fonts. Вот эти проблемы мы и научимся решать ниже.

Как исправить проблемы позиционирования блоков в скрипте Masonry

Напомню о сути проблемы: при использовании шрифтоф Google Fonts в работе скрипта Masonry появлялись проблемы в виде разной высоты разрывов между анонсами статей. Такой же эффект, только намного более заметный давало и использование форматов записей, в частности при вставке галереи Tiled Gallery из пакета пагинов Jetpack.

fucked_02

Как я уже сказал, я использую на своем блоге пакет Jetpack, в котором есть замечательный плагин модных плиточных галерей, но при вставке такой галереи под появлялся большой промежуток:

2014-08-01 12-07-42 Блог полуночника kbaott.net - Opera

В этих разрывах виноват именно скрипт Masonry: при использовании веб-шрифтов он отрабатывает раньше, чем подгружаются шрифты и поэтому по окончании полной загрузки страницы блоки немного сплющиваются. Может быть и другой вариант — когда блоки будут поначалу становится ровно, а потом рывком наползать друг на друга.

С галереей примерно то же самое: при построении красивой плиточной галереи Tiled Gallery из Jetpack, скрипт, который рассчитывает размеры изображений тратит на это много времени (причем делает это в несколько этапов), а Masonry отрабатывает намного быстрее и для позиционирования блоков использует первые попавшиеся (промежуточные) данные, которые возвращает скрипт Tiled Gallery. Поэтому и появляется этот разрыв.

Для борьмы с этим на официальном сайте Masonry (см. выше) есть пояснения: разделы ImagesLoaded и Web fonts. Вы можете ознакомится с официальными методами по указанным ссылкам. Но чтобы упростить работы по исправлению этих ошибок я дам свои рекомендации.

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

/* Определение основных параметров работы Masonry */
jQuery(document).ready(function($) {
  $('#post-area').masonry({       /*  указываем id блока, к которому применяем masonry */
  isAnimated: true,                        /*  для отключения анимации блоков поставьте false */
   animationOptions: {
    duration: 500,                             /*  скорость анимации в миллисекундах  */
    easing: 'linear',                           
    queue: false                                 
  }
  });
});

/* ИСПРАВЛЕНИЕ ПРОБЛЕМЫ С ГАЛЕРЕЯМИ */
/*  включение задержки выполнения Masonry  */ 
/*  пока не загрузятся все изображения */
/* начало */
( function( $ ) {
var $container = $('#post-area');    /*  обратите внимание: тут тоже нужно указать id блока  */
$container.imagesLoaded( function() {
$container.masonry();
});})( jQuery );
/* конец  */

/* ИСПРАВЛЕНИЕ ПРОБЛЕМЫ С ВЕБ ШРИФТАМИ */
/* начало */
function triggerMasonry() {
  if ( !$container ) {
    return;
  }
  $container.masonry({
  });
}
$(function(){  
  $container = $('#post-area'); 
  triggerMasonry();
});
Typekit.load({
  active: triggerMasonry,
  inactive: triggerMasonry
});
/* конец */

Выберите то, что вам нужно, а комментарии и ненужную часть скрипта можно удалить, например если у вас только проблема с веб шрифтами, задержку при загрузке картинок можно удалить.

Подключаем этот файл в шаблоне. В файле темы header.php перед закрывающимся тегом </head> вставляем:

<script src="путь/к/файлу/functions.js"></script>

Кстати, этот код можно подключить и прямо на странице, так же перед закрывающимся тегом </head> вставляем:

<script type="text/javascript">
jQuery(document).ready(function($) {
  $('#post-area').masonry({
  isAnimated: true,
   animationOptions: {
    duration: 500,
    easing: 'linear',
    queue: false
  }
  });
});

( function( $ ) {
var $container = $('#post-area');
$container.imagesLoaded( function() {
$container.masonry();
});})( jQuery );

function triggerMasonry() {
  if ( !$container ) {
    return;
  }
  $container.masonry({
  });
}
$(function(){  /*   */
  $container = $('#post-area');
  triggerMasonry();
});
Typekit.load({
  active: triggerMasonry,
  inactive: triggerMasonry
}); 
</script>

Эффект будет примерно одинаковый, хотя более правильно JavaScript подключать именно файлом.

Кстати, если у вас WordPress, то подключить сам скрипт Masonry и файл настроек можно через файл functions.php в вашей теме, просто добавив в него код:

function mason_script() {
    wp_register_script( 'masonry', '/путь/к/файлу/masonry.pkgd.min.js');  
    wp_enqueue_script( 'masonry.functions',  'путь/к/файлу/functions.js' );
    wp_enqueue_script( 'masonry' );
}
add_action( 'wp_enqueue_scripts', 'mason_script' );

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

Как внедрить Masonry на любой сайт

Теперь представим ситуацию, что у нас сайт не на CMS WordPress последней версии, а скажем на DLE (DataLife Engine) и на нем мы тоже хотим такое красивое расположение блоков с использованием Masonry.

Все довольно таки просто. Перво-наперво скачиваем с официального сайта Masonry файл masonry.pkgd.min.js. Заливаем его к себе на сервер и подключаем в шаблоне. Для DLE в файле темы main.tpl до закрывающегося тега </head> вставляем:

<script src="{THEME}/js/masonry.pkgd.min.js"></script>

Теперь определяем структуру блока, в рамках которого будет работать Masonry. например так:

<div id="mason-container">
  <div class="mason-box">...</div>
  <div class="mason-box wide">...</div>
  <div class="mason-box">...</div>
  <div  class="mason-box">...</div>
  ...
</div>

В CSS нужно указать что-то типа:

.mason-box { width: 25%; }
.mason-box wide { width: 50%; }

Теперь на странице необходимо инициализировать работу скрипта:

<script type="text/javascript">
var container = document.querySelector('#mason-container');
var msnry = new Masonry( container, {
  columnWidth: 300,
  itemSelector: '.mason-box'
});
</script>

Более подробно можно почитать в официальной документации. Там все очень наглядно расписано.

Теперь покажу на реально работающем примере:

1. Подключаем файл masonry.pkgd.min.js как показано выше.

2. На странице через HTML инициализируем скрипт:

<div id="container-mason" class="js-masonry" data-masonry-options='{ "itemSelector": ".halfnews-content" }'>
          <div class="halfnews-content"> 
                      {content}
          </div>
</div>

3. В CSS записано следующее:

.halfnews-content {
	padding: 0 5px 5px 10px;
	margin-bottom:15px;
	border: 1px solid #E9E9E9;
	      -webkit-box-shadow: 0 0 1px #bbb;
	     -moz-box-shadow: 0 0 1px #bbb;
	box-shadow: 0 0 1px #bbb;
	width:345px;  /* очень важный пункт - тут регулируется ширина блока */
/*  если она будет больше чем нужно, то блоки или не смогут */
/* выровняться  по горизонтали или наползут друг на друга*/
	margin-left: 10px;  /* здесь задается расстояние по горизонтали между блоками */
}

Вот такая нехитрая конструкция работает на главной странице сайта ТЕХНОТРОН (там где контент расположен в две колонки).

Ну вот и все. Если я где-то ошибся, то не нарочно, просто пост большой и сказать хотелось многое, поэтому ошибки не исключены — если что-то не выходит или где-то явная ошибка: обращайтесь  вместе разберем, найдем изъян и исправим. Простите за сумбурность описанных методов.

Всем пока. Надеюсь это было полезно.

Вместо эпилога:

— Давай просто посидим, чаю попьем
— Хочу сказать, что маньяк вы так себе.

— «Я постиг шизофрению»

Метки: , ,
Писано 01.08.2014

Понравилась статья? Тогда получайте обновления на e-mail: