PHPで取得した値をJavaScriptに渡す
初歩も初歩なんでしょうけど…
グリッドレイアウトを組める Vanilla JavaScript ライブラリ
これを WordPress で使うために、PHP で取得した値を JavaScript に渡す方法を調べたので自分用にメモしました。
Magic Grid の使い方
適当な方法で本体を読み込んで、
code:magic-grid.mim.js
<script src="//unpkg.com/magic-grid/dist/magic-grid.min.js"></script>
オプションを書く
code:magic-grid-setting.js
let magicGrid = new MagicGrid({
container: '#container',
static: false,
items: 5, //表示件数 動的サイトの場合は必須
...
});
magicGrid.listen();
やりたいこと
(カスタム投稿タイプの)アーカイブで、画像を2カラムに並べてギャラリーを作る
画像ごとに高さは異なる(制御できない)
つまり:Google画像検索の結果っぽいのを作る
code:archive.php
<div id="#container">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : ?>
<?php the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class('item'); ?>>
<a href="<?php echo esc_url( get_permalink() ); ?>">
<?php $image = get_field('img'); if($image):
//カスタム投稿タイプの画像 by.CPT UI ?>
<?php endif; ?>
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
つまづき
ブログのアーカイブページに使う場合、1ページあたりの表示数が端数になることがある。
例:1ページあたりの表示件数が5件、記事が全7件ある場合、
1ページ目 → 5件表示 (Magic Gridが動作する)
2ページ目 → 2件表示 (items: 5 と異なるのでMagic Gridが動作しない)
CSSオンリーで、
を試してみたが、どちらも意図した結果は実装できなかった。
解決方法
(1) WPで「現在表示しているページの投稿の件数を取得する」方法
現在表示しているページに何件の投稿が存在するかは、$wp_queryのpost_countプロパティが保持しています。
<?php echo $wp_query->post_count; ?>
(2) オブジェクト変数にPHPの値を渡して、外部JSで使えるようにする方法
code:sample.php
<?php $str = "オブジェクト変数に渡して外部jsの無名関数で処理"; ?>
<?php $jStr = "オブジェクト変数に渡して外部jsのjQuery関数で処理"; ?>
<script>
var php = {
str: "<?php echo $str; ?>",
jStr:"<?php echo $jStr; ?>",
};
</script>
(1) + (2)
ループ内で $wp_query->post_count; を取得
code:archive.php
<div id="container">
<?php if ( have_posts() ) : ?>
<?php $str = $wp_query->post_count; //現在の1ページに表示される投稿の数を取得 ?>
<p>いま<?php echo $str; ?>件表示しています</p>
<?php while ( have_posts() ) : ?>
<?php the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class('item'); ?>>
<a href="<?php echo esc_url( get_permalink() ); ?>">
<?php $image = get_field('img'); if($image): ?>
<?php endif; ?>
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
$wp_query->post_count;をオブジェクト変数に渡す
code:script.js
var php = {
str: "<?php echo $str; ?>",
};
Magic Grid のオプションに渡す
code:magic-grid-setting.js
let magicGrid = new MagicGrid({
container: '#container',
static: false,
items: php.str, // ここに渡す
...
});
magicGrid.listen();
これでOKでした。
単純なデータだからこれでいいんだろうな…セキュリティ的にはどうなんだろうね
結論
css grid を使ったほうが楽なので、デザイン段階でできればカードの大きさを揃える。