ようこそのお運びで、厚く御礼申し上げます。
４９日目です。今回はショートコードを使って、特定の記事のリンクを表示してみます
ショートコードを使って、IDやスラッグを指定して、特定の記事へのリンクを作成してみる。
IDやスラッグを「属性」で指定して、特定の記事へのリンクを表示するショートコードを作成します。
今回はショートコードを書くときに属性とその値を設定します。
記事のidを「id」、記事のスラッグを「slug」としてどちらかを書き、値を以下のように持たせます。
※idとslugを両方書いた場合は、slug優先です。
表示側には、指定した記事のリンクが表示されるようになります。
まずは、function.phpに書いてみます。
では、function.phpに以下のコードを書きました。
今回は２つのフックを作成しています。
一つ目がショートコード、二つ目がCSSの追加です。メインの機能は前者のコードですので、２つに分割してここに表記します。
記事にリンクを貼るショートコードを作成
//1.ショートコードを作成
add_shortcode('postLink', 'paka3_postLink');
function paka3_postLink($atts) {
extract(shortcode_atts(array(
'id' => 0,
'slug' => ""
), $atts));
//＊slugからidを取得
if($slug){
$post_id=get_page_by_path($slug,OBJECT,"post")->ID;
$page_id=get_page_by_path($slug,OBJECT,"page")->ID;
//投稿記事or固定ページ
$s_id = $post_id ? $post_id : $page_id;
//id見つからなかったら、$idを入れる
$id = $s_id ? $s_id : $id;
}
//＊値を取得
$post =get_post( $id );
//＊何もない場合はなし
if(!$post ) return false;
//＊表示
$link = get_permalink($post->ID);
$img_src = get_the_post_thumbnail( $post->ID,array(80,80),array('align'=>'left'));
$contents = mb_strimwidth($post->post_content, 0, 70, "...","UTF-8");
$str =<<<EOS
<div class="paka3_postLink">
<a href="{$link}">
{$img_src}
<h4>{$post->post_title}</h4>
<p>{$contents}</p><div></div>
</a>
</div>
EOS;
return $str;
}
CSSを設定するのコード
//2.適用するCSSを定義
add_action('wp_head','paka3_postLink_css');
function paka3_postLink_css($headers){
echo <<<EOS
<style type="text/css">
div.paka3_postLink{
border:1px solid #ccc;
padding:2pt;margin:5pt;
}
div.paka3_postLink img{
margin-right:5pt;
}
div.paka3_postLink h4{
}
div.paka3_postLink p{
font-size:9pt;
line-height:100%;
color:#999;
}
div.paka3_postLink div{
clear:left;
}
</style>
EOS;
}
ポイントはどこ？
「ショートコードの作成」の部分の説明をします。
- ショートコード用の関数を作成
function paka3_postLink($atts) { //属性値の初期化 //＊slugからidを取得 ・・・ //＊値を取得 ・・・ return $str; } - 第一引数「$atts」にショートコードで指定した「属性(idやslug)」の値が入ります。shortcode_atts関数で、正当性をチェックしデフォルトも設定してしまいます。
（WordPressCodex:shortcode_attsを参照）extract(shortcode_atts(array( 'id' => 0, 'slug' => "" ), $atts));
- extractでシンボルテーブルにインポート、つまり属性(idやslug)は$idや$slugなど変数と同じようにあつかえます。
- 今回はslugから記事のidを取得します。
※idとslugの値がある場合はslugが優先されるように書いてます。if($slug){ $post_id=get_page_by_path($slug,OBJECT,"post")->ID; $page_id=get_page_by_path($slug,OBJECT,"page")->ID; //投稿記事or固定ページ $s_id = $post_id ? $post_id : $page_id; //id見つからなかったら、$idを入れる $id = $s_id ? $s_id : $id; } - get_page_by_pathでslugから記事のidを取得します。投稿記事と固定ページから探すようにしています（WordPressCodex日本語版:get_page_by_pathを参照）。
（今回はカスタム投稿には対応していません） - get_postで記事を取得します。記事がない場合はfalseを返します。
//＊値を取得 $post =get_post( $id ); //＊何もない場合は返り値はない if(!$post ) return false; - 取得した値をもとに、表示するhtmlを生成します。
//＊表示 //リンクの設定 $link = get_permalink($post->ID); //画像、サムネイルの設定 $img_src = get_the_post_thumbnail( $post->ID,array(80,80),array('align'=>'left')); //コンテンツ内の文章の設定(７０文字制限) $contents = mb_strimwidth($post->post_content, 0, 70, "...","UTF-8"); $str =<<<EOS <div class="paka3_postLink"> <a href="{$link}"> {$img_src} <h4>{$post->post_title}</h4> <p>{$contents}</p><div></div> </a> </div> EOS; - 後は記事の本文など、表示したい部分に記事本文内にショートコードを記入します。
1.記事idを属性に設定する場合[postLink id=215]
2.スラッグを属性に設定する場合
[postLink slug=wpplugin000]
※スラッグとidを両方書いた場合
[postLink slug=wpplugin000 id=215]
この場合はスラッグが優先されます。
- 後はスタイルシート等の設定を書いてください。
（※今回は説明省略）add_action('wp_head','paka3_postLink_css');
コードをプラグイン用のファイルにします
それではfunction.phpに書いたコードを消して、
「paka3_shortCodePostLink.php」というファイルを作成し、以下のコードを記入します。
このファイルを[wp-content]>「plugins」ディレクトリに入れ、管理画面で有効にして完了です。
今回のまとめ
ショートコードで記事へのリンクを表示してみました。「記事をただ表示」っというのも簡単にすませれば簡単なんですけどね。ここら辺はどれが使いやすいか？っというのを考えると属性を考えてしまいます。今回は説明込みで、ここまですればいいかなーッと作ったのですが、わかりにくくなったかもしれません。あくまでもスニペットで行きたいところです。気をつけよう。