WordPressで jqueryプラグイン Qrcodeを表示する

萩原賢二のコーディングストック > プログラミング > WordPressで jqueryプラグイン Qrcodeを表示する

2019.08.29

QrCodeを表示するjQuery プラグインです。
投稿を日付順に、アイキャッチ画像のサムネイル、登校日、タイトル、パーマリンクを一覧で表示します。パーマリンクをQrCodeに変換しています。
表示は liを「display:flow」横並びにし日付、タイトルの DIV要素を「flex-grow: 2」として表示しています。
「jquery-qrcode 取得先」

2021年2月23日

ubuntu20.04 nginx に wordpress5.6 をインストール

2021年2月6日

ubuntu 20.04 nginx php postgreSQL 12.5 Webサーバー環境整備

2021年2月4日

ubuntu 20.04 nginx php mysql Webサーバー環境整備

2021年1月31日

ubuntu nginx SSL Webサーバー構築

2021年1月4日

mac Appleシリコンで WordPress ローカル環境構築

2020年4月16日

EC-CUBE4 を CentOS7、LAMP環境整備及インストール

2020年3月19日

raspberryPi 4B CenotOS7 をインストール LAMP環境を構築

2020年3月9日

美しい文字「Google Web Fonts」「Adobe Web Fonts」及 @font-face で Webフォント

2020年3月5日

テキストを流れるように表示するjQueryプラグイン「jQuery.Marquee」

2020年3月4日

wordpress メールをSMTP経由でのメール送信するように変更する

2020年2月20日

Raspberry Pi 4 ModelB Raspbian インストール VNCでリモートディスクトップ

function.php にショートコードの登録

function.php にショートコードの登録
function jqueryQrcode($atts) {
	require_once dirname(__FILE__) . "/php/qrcode.php";
	return $ret;
}
add_shortcode('flexqrcode', 'jqueryQrcode');

function.php にショートコードの登録

function jqueryQrcode($atts) {

require_once dirname(__FILE__) . "/php/qrcode.php";

return $ret;

}

add_shortcode('flexqrcode', 'jqueryQrcode');

投稿一覧を抽出およびバーコード出力

//投稿一覧を抽出およびバーコード出力
$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"), 
       ),
    ),
);	
$ret = "<ul id=\"qrcode\">";
$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取得
		$id = get_the_id();                              // 投稿記事のID取得 
		$permalink = get_permalink();                    // 投稿のパーマリンク取得 
		$eye_img = wp_get_attachment_image_src( $thumbnail_id , 'thumbnail' );				
		                        // アイキャッチ画像のサムネイルを取得）
		$ret .= 
		"<li>\n".
		"  <div class=\"thumbnail\">\n".
		"    <img src=\"{$eye_img[0]}\" width=\"100\" alt=\"\">\n".　　　// アイキャッチ画像のサムネイル
		"  </div>\n".
		"  <div class=\"qrtext\">\n".
		"	<h2>". get_the_date()."</h2>\n".　　　　    　　// 登校日取得
		"    <p>". get_the_title() . "</p>\n".            // タイトル取得
		"  </div>\n".
		"  <div id=\"id$id\" class=\"qr\"></div>".
		"</li>".
        // ------------------------------
        // jQueryによりパーマリンクをqrCodeに変換
        // ------------------------------
		"<script> \n".
		"jQuery(function($) {\n".
		"	$(\"#id{$id}\").qrcode(\"{$permalink}\");".
		"});\n".
		"</script>";
		if( $row > 10 ) break;
	}
}	
$ret .= '</ul>';	
	wp_reset_postdata();      // 投稿リストをリセット

//投稿一覧を抽出およびバーコード出力

$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"),

);

$ret = "<ul id=\"qrcode\">";

$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取得

$id = get_the_id(); // 投稿記事のID取得

$permalink = get_permalink(); // 投稿のパーマリンク取得

$eye_img = wp_get_attachment_image_src( $thumbnail_id , 'thumbnail' );

// アイキャッチ画像のサムネイルを取得）

$ret .=

"<li>\n".

" <div class=\"thumbnail\">\n".

" <img src=\"{$eye_img[0]}\" width=\"100\" alt=\"\">\n".　　　// アイキャッチ画像のサムネイル

" </div>\n".

" <div class=\"qrtext\">\n".

" <h2>". get_the_date()."</h2>\n".　　　　　　// 登校日取得

" <p>". get_the_title() . "</p>\n". // タイトル取得

" </div>\n".

" <div id=\"id$id\" class=\"qr\"></div>".

"</li>".

// ------------------------------

// jQueryによりパーマリンクをqrCodeに変換

// ------------------------------

"<script> \n".

"jQuery(function($) {\n".

" $(\"#id{$id}\").qrcode(\"{$permalink}\");".

"});\n".

"</script>";

if( $row > 10 ) break;

}

$ret .= '</ul>';

wp_reset_postdata(); // 投稿リストをリセット

CSS

#qrcode ul {
  list-style: none;
}
#qrcode li {
  border-bottom: 1px solid #ccc;
  padding: 10px;
  display: flex;
}
#qrcode .thumbnail {
  border-radius: 3px;
  overflow: hidden;
  line-height: 0;
  margin-right: 5px;
}
#qrcode .qrtext {
  flex-grow: 2;
  width: 200px;
  padding: 0 10px 0 10px ;
}
#qrcode .qr {
  align-self: center;
  width: 100px;;
}
#qrcode .thumbnail {
  flex-shrink: 0;
}

#qrcode ul {

list-style: none;

}

#qrcode li {

border-bottom: 1px solid #ccc;

padding: 10px;

display: flex;

}

#qrcode .thumbnail {

border-radius: 3px;

overflow: hidden;

line-height: 0;

margin-right: 5px;

}

#qrcode .qrtext {

flex-grow: 2;

width: 200px;

padding: 0 10px 0 10px ;

}

#qrcode .qr {

align-self: center;

width: 100px;;

}

#qrcode .thumbnail {

flex-shrink: 0;

}

投稿者: khagiwara
プログラミング

ワードプレス上で可変的にグリッドレイアウトを行うjQueryプラグイン「vGrid」

ページ上の要素をふるわす CSShake 「CSSアニメーションライブラリー」

Webサイトデザイン、プログラミング、サーバー構築運用の記録