ワードプレス上で可変的にグリッドレイアウトを行うjQueryプラグイン[jquery.vgrid.js]で動作の確認をしてみます。
確認のために jQueryUIのResizableプラグインを利用し、要素（グリッドのコンテナ内のコンテンツ）をマウスによってリサイズして可変的にレイアウトます。
グリッドレイアウトの要素は、本ブログの投稿のアイキャッチ画像とタイトルで投稿のパーマリンクがリンクとしてセットしてあります。
また、リサイズ用のコンテナは本ブログの右側のウィジェットに広げられない様に幅に制限をいれてあります。
また、サイズがはみ出ない様に、CSSで[ overflow:auto ]が設定してあります。
可変的にグリッドレイアウト
ワードプレス上で可変的にグリッドレイアウトを行うjQueryプラグイン「vGrid」
WordPress にて jQueryUI テーマを動的選択してデザインを反映
列行を一次元に並べて表示する CSS 「FlexBox」 jQuery + Ajax で挙動を確認する。
画像をポップアップするライトボックス jQuery プラグイン 「lightbox2」
Webページを本のようにめくる jQueryプラグイン 「Turn.js」
centos7 に Node Version Manager(nvm)で node.js のインストールするバージョンを管理する。
vim テキストエディターを快適に使う
MySQLによる 条件分岐とサブクエリー
郵便番号データベース MySQL ビュー View
郵便番号データベースで多対多のリレーション
PDOで郵便番号辞書データベース HTMLで一覧表示
PDOで郵便番号辞書データベース構築の記録
Centos7 に PostgreSQLをインストール PDO接続を試してみる。
centos7 + Apache2.4 + Mysql5.7 + Php7.0 構築の記録
Macにmysql 8.0.x をインストールする。
macOS Mojaveにデフォルトの Apache、PHPを利用してみる
function.phpショートコードの追加
|
1 2 3 4 5 6 7 8 |
// function.php ショートコードの追加 function resizeVgrid($atts) { require_once dirname(__FILE__) . "/php/Resizeable_vgrid.php"; // 画像取得用のPHPを記述ファイル（php） return $ret; } add_shortcode('vgrid', 'resizeVgrid'); |
jqueryのソース
|
1 2 3 4 5 6 7 8 9 10 |
// jQueryUI // Interactions Resizable の定義 $( "#resizable" ).resizable( { maxWidth: 685} ); // jQueryプラグイン 可変グリッド jquery.vgrid.js $(function(){ $("#grid-content").vgrid(); }); }); |
ショートコードによるPHPファイル(/php/Resizeable_vgrid.php)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
// 特定の書き込み限定でのソース記述 // Resizeable_vgrid.php if( get_the_ID() == 9999 ){ echo "<script src='", get_template_directory_uri() ,"/js/vgrid/jquery.vgrid.min.js'></script>\n"; } // 投稿のの範囲を指定 $args = array( "posts_per_page" => -1, // 抽出条件を全てとする 'date_query' => array( array( 'compare'=>'BETWEEN', // after から before 迄の期間で抽出する 'inclusive'=>true, 'before'=> date("Y/m/d"), 'after'=> date("Y/m/01"), ), ), ); $the_query = new WP_Query( $args ); // 条件内のオブジェクトを取得 if ( $the_query->have_posts() ) { // 投稿がある場合のループ処理 while ( $the_query->have_posts() ) { // 投稿がある分だけループ $the_query->the_post(); // 条件内の最初の投稿取得 ポインターはアップ $thumbnail_id = get_post_thumbnail_id(); // 投稿のサムネイルID取得 $permalink = get_permalink(); // 投稿のパーマリンク取得 $eye_img = wp_get_attachment_image_src( $thumbnail_id , 'medium' ); // キャプチャー画像を取得） $ret .= "<li><a href=\"{$permalink}\"><img src=\"{$eye_img[0]}\" width=120></a><br>". get_the_title(). '</li>'; // 投稿のタイトル取得 } wp_reset_postdata(); // 投稿オブジェクトをreset (ポインターリセット） } |
参考Webサイト
https://github.com/xlune/jQuery-vGrid-Plugin
https://jqueryui.com/resizable/
WordPress関数リファレンス