technical

【WordPress】同じタグが付いた記事を関連記事として表示する

こんにちは!WordPressのテンプレート改造についてのメモです。
このブログでも使用している、関連記事を表示する機能の追加方法です。
プラグインは使用いたしません!カスタマイズもバッチリです!


関連記事の判定は、「記事に同じタグが使われている事」を条件に行います。

仕組み
ごくシンプルです!


1.記事を表示する
2.表示した記事にくっついているタグを集める
3.集めたタグが付与されている記事を表示する

作業内容


WordPressテーマのうち、“single.php”に若干の追加と、
こちらで紹介する“part-tag-relatedpost.php”をテーマフォルダに追加し、中身を必要に応じてカスタマイズしてください。

まずは“single.php”のなかの、関連記事を追加したい位置に記述を追加します。
the_post(); で記事情報を取得している箇所より後に記述するようにして下さい。
(厳密には get_the_ID(); などの取得が可能な位置です。)
<?php
	$post_id = get_the_ID();	//記事の投稿IDを取得
	$tags = get_the_tags();		//この記事が含むタグをゲット
	echo get_template_part('part-tag-relatedpost'); //関連記事呼び出しテンプレート
?>
ここでは記事のIDをタグ配列を取得した上で、テンプレートパーツを呼び出す処理をします。
どちらも関連記事の取得および表示に必要な情報です。

そして、呼び出すテンプレートパーツ本体がこちらです。
まずは全文コピペして動作を確認してみて下さい!
ファイル名は“part-tag-relatedpost.php”として下さい。
テーマフォルダにアップロードするのも忘れずに!
<?php
	global $post_id;	//グローバル変数より投稿IDをゲット
	global $tags;		//グローバル変数よりタグ情報をゲット
	$relatedpost_count = 0;	//関連記事を出力した数(カウンタ)
	$relatedpost_max = 3;	//関連記事を出力する最大数
	$related_taglist = [];	//関連記事を出力する為のタグリスト
	
	//記事からタグを集める
	foreach( $tags as $tag ):	//記事に含まれるタグの数だけ繰り返し
		$related_taglist[] = $tag -> term_id;	//タグIDをリスト配列に追加
	endforeach;
	
	$args = array(				//出力用セッティング
	  'post__not_in'=> array( $post_id ),	//おおもとの記事は除外する
	  'tag__in'		=> $related_taglist,	//タグ配列に含まれるタグに含まれる記事を取得
	);
	query_posts( $args );		//設定より記事取得
	while ( have_posts() ) : 	//一致する記事が見つかった場合繰り返す
		the_post();
	?>
		<?php if( !$relatedpost_count ): /* 最初の記事の場合、ヘッダを付与 */ ?>
			
関連記事
<?php endif; ?>
<?php the_title(); ?>
<?php $relatedpost_count++; //記事を出力した数を加算 if( !($relatedpost_count < $relatedpost_max ) ): //[if]目的の数記事を出力した場合 break; //ループを出る endif; endwhile; if( $relatedpost_count ): ?>
<?php endif; wp_reset_query(); //元のクエリを復帰 ?>
処理のながれに関しては、コメントに書いてある通りです。
デフォルトでは、以下のような構造で出力されます。
20141218_b
掲載日時やサムネイル表示などもループ内でテンプレートタグから呼び出せば可能です。必要に応じて、カスタマイズしてみて下さい!
  • Category: technical / WordPress
  • Posted: 2014/12/17 18:00
  • Author: ユーリ
technical

【jQuery】コピペOK!タッチ操作とマウス操作の動作定義をまとめる

さいきん、スマホでもPCでも同じような動作を求められるWebAPIが増えていますよね。
動作はjQueryで書くことになるのですが、もともと用意されているイベント(click,mousemoveなど)ではタッチ操作を拾いきれないことがあります。
そこで、二つの環境の動作を同じ関数にまとめる定義を作りました。


まず、こちらがサンプルボタンです!PCでもスマホでも共通のコードで動作するところがポイントです!
demo

基本のクリック動作、押下、移動、キャンセルの4種を定義できます。

サンプルコードです!
動作定義部分と、jQuery拡張部分の二つに分けてご紹介します。

まずは、動作定義部分です。
上に置いてあるボタンは、こちらのコードで動作しています。
$(function(){
	$('#hoge').touchInterface(
	function(e,$_this){ //タッチorクリックの動作
		$_this.empty().append('action:up/end');
		$_this.css('background-color','#FFF');
	},
	function(e,$_this){ //(オプション)押下
		$_this.empty().append('action:down/start');
		$_this.css('background-color','#AAF');
	},
	function(e,$_this){ //(オプション)移動
		$_this.empty().append('action:move');
		$_this.css('background-color','#AFA');
	},
	function(e,$_this){ //(オプション)範囲外
		$_this.empty().append('action:out/cancel');
		$_this.css('background-color','#FFA');
	}
	);
});
はい、わりとシンプルな作りですね!
jQueryエレメントの挙動を拡張して”touchInterface”というアクションを命令し、
その引数として関数を4つ渡しています。
まとめるとこんな感じです。
$(element).touchInterface(up,[down],[move],[out]);
引数はすべてfunction(関数)です。
また、2〜4つ目の引数は省略できます。

関数内では、 $(this) という表記が使えない為、代わりに $_this を使用して下さい。
また、タッチ位置などを使いたい場合は、e の中から引っ張って下さい。

続いて、肝心のjQuery拡張部分です。
jQueryの機能を拡張して、「touchInterface」というアクションを定義しています。
$.fn.extend({
	touchInterface : function(up){
		var down	= (arguments.length > 1 ) ? arguments[1] : false;
		var move	= (arguments.length > 2 ) ? arguments[2] : false;
		var cancel	= (arguments.length > 3 ) ? arguments[3] : false;
		return $(this).on({
			'touchstart mousedown'	: function(e){
				e.preventDefault();
				this.touching = true;
				if(down)down(e,$(this));
			},
			'touchmove mousemove'	: function(e) {
			 	if(!this.touching)return;
				e.preventDefault();
				if(move)move(e,$(this));
				if('ontouchstart' in window){
					var touch = e.originalEvent.changedTouches[0];
					var offset = $(this).offset();
					if(	touch.pageX < offset.left || touch.pageX > $(this).outerWidth()  + offset.left ||
						touch.pageY < offset.top  || touch.pageY > $(this).outerHeight() + offset.top  ){
						this.touching = false;
						if(cancel)cancel(e,$(this));
					}
				}
			},
			'touchcancel mouseout'	: function(e){
				if(!this.touching)return;
				e.preventDefault();
				if(cancel)cancel(e,$(this));
				this.touching = false;
			},
			'touchend mouseup'		: function(e){
				if(!this.touching)return;
				e.preventDefault();
				up(e,$(this));
				this.touching = false;
			}
		}).css('cursor','pointer');
	}
});
上記のjQuery拡張部分のコードは、JavaScriptソース内のjQuery動作定義部分の外側に記述してください。
もちろんjQuery本体も忘れずに読み込んでくださいね!

拡張部分のポイントは、タッチ系のイベントとマウス系のイベント両方に対して同じイベントをバインドしているところです。
また、オブジェクトに対してタッチした後、タッチ移動した際にタッチ位置がオブジェクトの外に出た場合、 PCではmouseoutが呼ばれるのに対し、スマートフォンでは対応するイベントがありません。
そこで、挙動を統一する為に、タッチ操作のときのmoveイベント内で、オブジェクトの外に出ていないか判定する処理を設けています。

さらに詳しくは、デモページを用意いたしましたので、併せてご覧ください。
デモページのソースにはコメントも併記しています。

>> demo page
今回のコードを書くにあたり、こちらの記事を参考にさせていただきました!
Developer’s Blog | iPhone/Android/PC 対応。jQuery で書くタッチイベント
以上です!拙い部分もあるやもしれませんが、ご容赦ください。
  • Category: technical / jQuery
  • Posted: 2014/11/28 20:00
  • Author: ユーリ
technical

【備忘録】Xcodeの実機テストで、ログが出力されなくなった

こんにちは。

Xcodeでのコーディング中のこと。
シミュレータでの動作ではconsoleにログが出力されるのに、
実機テストを行うとログが出力されなくなる ということがありました。

続きを読む…
  • Category: technical / swift
  • Posted: 2014/11/13 10:49
  • Author: ユーリ
technical

【CSS】cssだけでオシ心地のよいボタンを作る

こんにちは。cssの表現についてご紹介いたします。

わたくしがHTMLやCSSのコーディングに初めて触れたのは、もう10年以上前のお話ですが、
久々にHTMLやCSSをお仕事で扱うことになった今、最近のCSSの進化に驚かされました。

続きを読む…
  • Category: technical / html/css
  • Posted: 2014/11/7 16:24
  • Author: ユーリ
technical

【備忘録】文法を間違えていないのに、jsonファイルがうまく取得できない

続きを読む…
  • Category: technical
  • Posted: 2014/10/31 12:47
  • Author: ユーリ