Я никогда не делал этого раньше, поэтому я хочу узнать, как это сделать. Я работаю в WordPress и создаю плагин. У меня есть функция в верхней части моего документа, которая добавляет некоторый код jQuery в нижний колонтитул моей страницы, упрощенная версия этого выглядит следующим образом:
function slug_masonry_init() { ?>
<script>
jQuery(function($) {
var container = document.querySelector("#skizzar_masonry_loop");
var msnry = new Masonry( container, {
columnWidth: <?php echo $masonry_item_width ?>,
gutter: <?php echo $masonry_item_padding ?>,
itemSelector: ".skizzar_masonry_entry"});
});
</script>
<?php }
//add to wp_footer
add_action( 'wp_footer', 'slug_masonry_init' );
Вы заметите в <script>
Есть несколько переменных PHP: $masonry_item_width
а также $masonry_item_padding
Эти переменные определяются пользователем, функция, которая обрабатывает их, находится немного дальше в моем документе и выглядит так:
function skizzar_masonry_shortcode($atts,$content = null) {
global $skizzar_masonry_item_width, $skizzar_masonry_item_padding;
$el_class = '';
extract(shortcode_atts(array(
"masonry_item_width" => '240',
"masonry_item_padding" => '5',
"el_class" => '',
),$atts));
$skizzar_masonry_item_width = $masonry_item_width;
$skizzar_masonry_item_padding = $masonry_item_padding;
$output .= '<style>.skizzar_masonry_entry, .skizzar_masonry_entry img {width:'.$masonry_item_width.'px;} .skizzar_masonry_entry.skizzar_ma_double, .skizzar_masonry_entry.skizzar_ma_double img {width:560px; /* + padding */} .skizzar_masonry_entry {margin-bottom:'.$masonry_item_padding.'px; overflow:hidden;}</style>';
$output .= '<div id="skizzar_masonry_loop" class="'.$el_class.'">';
$output .= do_shortcode($content);
$output .= '</div>';
return $output;
}
ПРИМЕЧАНИЕ: две глобальные переменные, которые вы видите здесь: $skizzar_masonry_item_width
а также $skizzar_masonry_item_width
определены немного дальше вверх по документу (между двумя фрагментами кода) — это пользовательский интерфейс для ввода ширины и отступов, код, который вы видите здесь, создает шорткод.
Что я не знаю, как это сделать, это добавить $masonry_item_padding
а также masonry_item_width
на мой сценарий jQuery в верхней части страницы — в настоящее время они просто возвращаются пустыми.
Ты должен echo
переменные для их вывода
columnWidth: <?php echo $masonry_item_width ?>,
gutter: <?php echo $masonry_item_padding ?>,
Что касается того, как получить ваши значения … WordPress делает плагины такими беспорядочными со всеми этими автономными обратными вызовами. Обычно я ненавидел бы это, но я не могу придумать другой способ сделать эту работу. Я помещаю их в массив, чтобы сделать меньше глобальных. Эта часть идет в вашем skizzar_masonry_shortcode
$GLOBAL['skizzarvar'] = array(
'width' => $masonry_item_width,
'padding' => $masonry_item_padding
);
Тогда вы можете сделать это в своем slug_masonry_init
<?php echo $GLOBAL['skizzarvar']['width'] ?>
все, что вам нужно сделать, это:
function slug_masonry_init()
{
global $masonry_item_width, $masonry_item_padding;
...
Узнайте больше о global
ключевое слово здесь: http://php.net/manual/en/language.variables.scope.php