改行をリスト(li)に変換するショートコードで効率化【WordPress】

2019年9月7日

記事を書いていると、リストで表現したいことが少なからずあります。

ul（ol）タグとliタグを使用する、こういう奴↓ですね。

<ul>
    <li>ここに</li>
    <li>リストのテキストが</li>
    <li>入ります</li>
</ul>

しかし、Wordpressのエディタで記事を書くと、いちいちliで囲ったり、インデントを付けたりするのが面倒くさくなってくるわけです。

ということで、今回はWordpressのショートコードを使用して、改行をするだけでliタグとして出力できる機能を追加してみました。

改行をリスト化の仕様について

今回紹介するショートコードは、liタグを付けず、改行させるだけで1行のリストとしてみなし、自動的にliタグを挿入します。

[listag]
これが1行目
これが2行目
これが3行目
[/listag]

と書くことで、ulタグとliタグを自動的に付けます。

<ul>
    <li>これが1行目</li>
    <li>これが2行目</li>
    <li>これが3行目</li>
</ul>

liタグで囲う必要がないと、サクサクリストを書くことが出来るので、かなり作業効率が上がりますよ。

番号を振るolタグを振りたい場合は、typeにolを付けてもらえればolタグ表示になります。

[listag type="ol"]
これが1行目
これが2行目
これが3行目
[/listag]

また、ulタグまたはolタグにクラスを付けたい場合は、class属性に任意のクラスを付けてもらえれば対応します。

[listag class="list-box"]
これが1行目
これが2行目
これが3行目
[/listag]

リスト化させるショートコード

下記のソースコードを、functions.phpに追記してください。

//改行リストタグ
function listagSC($attr, $content = null){
	$content = str_replace(['<p>', '</p>'], '', $content); //自動挿入されるpタグを除外
	$content = preg_replace('/<br \/>$/im', '', $content); //自動挿入されるbrタグを除外
	$aryContent = explode("\n", $content);
	$aryContent = array_filter($aryContent, 'strlen'); //空白行を除外
	
	if(!$attr) $attr = [];
	if(!isset($attr['type'])) $attr['type'] = 'ul';
	if(!isset($attr['class'])) $attr['class'] = '';
	
	$html = '';
	$html .= '<'.$attr['type'].($attr['class'] ? ' class="'.$attr['class'].'"' : '').'>';
	foreach($aryContent as $value){
		$html .= '<li>'.$value.'</li>';
	}
	$html .= '</'.$attr['type'].'>';
	
	return $html;
}
add_shortcode('listag', 'listagSC');

ソースコードを追加したら、listagで囲ったエリアは、1行をliタグとしてみなすことができます。

注意点として、1行＝1liタグとなるため、liタグの中で改行を積極的に使う場合はこちらのショートコードは適していません。

一応、手動挿入のbrに関してはしっかり動くようにしています。

[listag]
これが1行目<br>改行も適用
これが2行目
これが3行目
[/listag]

ただ、liタグの中でよく改行を使う場合は逆に手間になりかねないので、用途に合わせてご利用ください。

---

WordPressにて、記事の作成時に少しでも作業が効率化されればと思いリストタグのショートコード化を作成しました。

あくまで1行に対しての自動挿入ですが、liタグはあまり改行ありきで使わないと思うので、自身の記事構成と合う方は実際に導入してみてください。

また、ブラウザ上で改行毎に自動的にタグを挿入するツールも開発しました。

改行毎にタグを自動挿入するツール

liタグも自動挿入できるので、こちらも是非お試しください。

以上、改行をリスト(li)に変換するショートコードで効率化、でした。