はじめに
こんにちは。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>最後に
ショートコードを使うことで少しですが、投稿の手間が減りました。記事内で他の記事を紹介するショートコードを作ったり、色々な使い方ができて便利です！
