ショートコードを使って、特定の記事へのリンクを作成してみる。:【49日目】WordPress1日1プラグイン

ようこそのお運びで、厚く御礼申し上げます。
49日目です。今回はショートコードを使って、特定の記事のリンクを表示してみます

ショートコードを使って、IDやスラッグを指定して、特定の記事へのリンクを作成してみる。

IDやスラッグを「属性」で指定して、特定の記事へのリンクを表示するショートコードを作成します。

今回はショートコードを書くときに属性とその値を設定します。
記事のidを「id」、記事のスラッグを「slug」としてどちらかを書き、値を以下のように持たせます。

140309-0001

※idとslugを両方書いた場合は、slug優先です。

表示側には、指定した記事のリンクが表示されるようになります。

140309-0002

まずは、function.phpに書いてみます。

では、function.phpに以下のコードを書きました。

今回は2つのフックを作成しています。
一つ目がショートコード、二つ目がCSSの追加です。メインの機能は前者のコードですので、2つに分割してここに表記します。

記事にリンクを貼るショートコードを作成

//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'));
        //コンテンツ内の文章の設定(70文字制限)
        $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」ディレクトリに入れ、管理画面で有効にして完了です。

今回のまとめ

ショートコードで記事へのリンクを表示してみました。「記事をただ表示」っというのも簡単にすませれば簡単なんですけどね。ここら辺はどれが使いやすいか?っというのを考えると属性を考えてしまいます。今回は説明込みで、ここまですればいいかなーッと作ったのですが、わかりにくくなったかもしれません。あくまでもスニペットで行きたいところです。気をつけよう。

wordpress1日1プラグイン

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です