【wordpress】preタグをショートコードを使って生成させてみた

wordpress
wordpress レクチャー 全て

はじめに

こんにちは。lemooです!

技術ブログをはじめてみて、コードを埋め込むのにいちいち<pre>タグを書いていくのが手間に感じました。でもプラグインは使いたくないなと。そこでショートコードで生成してみました。

ショートコードの基本

自己完結型ショートコード

functions.php
//ショートコードの関数
function foobar_func( $atts ){ 
        //実行する処理(foo and barを返す)
	return “foo and bar”; 
}
//ショートコードタグ用のフックを追加(‘ショートコード名’,’関数名’)
add_shortcode( ‘foobar’, ‘foobar_func’ );

使い方は投稿の中に[ショートコード名]を書く。

投稿の中
[foobar]

foo and barという値が返されて表示される。

囲み型ショートコード

functions.php
//ショートコードの関数(第2パラメータとして$contentを受け取る)
//$contentのデフォルト値としてnullを与える
function caption_shortcode( $atts, $content = null ) {
    return ‘<span class="caption">‘ . $content . ‘</span>‘;
}
add_shortcode(‘caption’, ‘caption_shortcode’);

使い方は、[ショートコード名]ここに内容[/ショートコード名]と書く。

投稿の中
[caption]キャプション[/caption]

下記のhtmlが生成される。

<span class="caption">キャプション</span>

囲み型ショートコードを使ってpreタグを生成する

作成したショートコード

functions.php

function pre_code ( $atts, $content = null  ) {
  extract( shortcode_atts( array(
	   ‘label’ => ”,
	  ), $atts ) );
  $outputlabel .= ‘<span class="code_label">‘ . $label . ‘</span>‘;
  if(empty($label)){
    return
      ‘<div class="code_box">
      <pre class="prettyprint"><code>'
      . esc_html($content) .
      '</code></pre></div>‘;
  }else{
    return
       ‘<div class="code_box">‘
       . $outputlabel .
       ‘<pre class="prettyprint" style="padding-top:2em"><code>'
       . esc_html($content) .
       '</code></pre></div>‘;
	}
}
add_shortcode(‘pretag’, ‘pre_code’);

CSS

style.css
.code_box{
  position: relative;
}
.code_box span.code_label{
  background-color: #6A5ACD;
  color: #fff;
  font-family: Andale Mono,Consolas,monospace;
  font-size: .8rem;
  left: 2rem;
  padding: .25em 1em;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

解説

label属性にデフォルト値を付与する。

extract( shortcode_atts( array(
	   ‘label’ => ”,
	  ), $atts ) );

label属性の値を<span class=”code_label”></span>で囲い、$outputlabelに代入

$outputlabel .= ‘<span class="code_label">‘ . $label . ‘</span>‘;

出力するhtmlをreturnで返す。

if(empty($label)){
    return
      ‘<div class="code_box">
      <pre class="prettyprint"><code>'
      . esc_html($content) .
      '</code></pre></div>‘;
  }else{
    return
       ‘<div class="code_box">‘
       . $outputlabel .
       ‘<pre class="prettyprint" style="padding-top:2em"><code>'
       . esc_html($content) .
       '</code></pre></div>‘;
	}

if文を使いlabel属性の値の有無でhtmlを変える。label属性値がからの時(empty($label)は. $outputlabel .を消している。また、label属性値があるときはpreタグにstyle=”padding-top:2em”を追加している。

使うときにlabelに任意の文字列などを入れることができる。

[pretag label=”任意のラベル”]<div>ここにコード</div>[/pretag]

出力結果

任意のラベル
<div>ここにコード</div>

最後に

ショートコードを使うことで少しですが、投稿の手間が減りました。記事内で他の記事を紹介するショートコードを作ったり、色々な使い方ができて便利です!

タイトルとURLをコピーしました