WordPress 記事の小見出しをショートコード化

サイトのデザイン変更を行うと同時に HTML5 化したのだけれど、そのとき悩んだのがサイトのアウトライン。構造的に考えていくとどうしてもブログの記事部分のタイトルが <h2> ではなく <h3> になってしまうんですね。記事タイトルが <h3> って SEO 的にどうなのかとかいろいろ考えましたが、アウトラインがしっかりしていたほうがいいかな、と思い記事タイトルを <h3> としました。

そこで困ってくるのが小見出し。今まで <h3> タグで書いていたけれど、 <h4> にしなくちゃいけません。そこで、今後また変更するかもしれないので、小見出しをショートコードで出力することにしました。

小見出しをショートコード化

下記サイトを参考にショートコードを書いてみました。 function.php に付け加えます。全然難しくない。

→ WEBOPIXEL ： WordPress のショートコードを自作してみる

//中見出し、小見出しのショートコード
function my_subheading( $atts, $content = null ) {
	return '<h4>' . $content . '</h4>';
}
add_shortcode('hs', 'my_subheading');

function my_subsubheading( $atts, $content = null ) {
	return '<h5>' . $content . '</h5>';
}
add_shortcode('hss', 'my_subsubheading');

入力するときは HTML エディタ下記のように書きます。

[hs]中見出し[/hs]

[hss]小見出し[/hss]

余談ですが、小見出しとか中見出しとかのあたる英語がよくわからず適当な感じの関数名になってしまいました。調べてみましたが subheading と crossheading の違いがよくわからないです。

ショートコードの前後に無駄な <br /> タグや <p> タグが出力される

これで OK って思って今まで書いていた記事をショートコードに切り替えていたのだけれど何かおかしい。なんか中見出しの下に妙な空間が開くんですよね。原因は WordPress の自動整形がうまくいかず、 </h3> タグの直後に <br /> タグが出力されてしまっているためでした。

先に上げたサンプルだと下記のうように出力されます。

<h4>中見出し</h4>
<p><h5>小見出し</h5><br />

閉じてない <p> タグ、ブロック要素のあとの無駄な <br /> タグ。これは汚い。インライン要素なら問題ないのですが、ブロック要素だと汚くなってしまうようです。

調べてみると自動整形が行われてからショートコードが実行されているようです。

→ WordPress Codex 日本語版：ショートコード API

ショートコードが実行されたあとに WordPress の自動整形を動かせばいいみたいです。（公式には正しくない動作とかかれているけれど。）

→ Stellar Web Works ： Solution to WordPress adding br and p tags around shortcodes

function.php に下記のコードを追加。

//自動整形wpautop()の実行順を変更（無駄な<br />や<p>タグが入るのを防止
remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 12);

wpautop っていうのは自動整形の関数。

ついでに HTML エディタにボタンを追加する

いちいち手でショートコードの [hs][/hs] を入力するのも面倒なので、編集画面の HTML エディタ上部にボタンを追加してみることにした。 AddQuickTag というプラグインでもできるのだけれど、大した変更じゃないので function.php に書くことにしました。

→モノについてのモノ語り： WordPress 3.3 の HTML エディターにクイックタグを追加する

// HTMLエディタにオリジナルボタンを追加
function add_my_quicktag() {
?>
<script type="text/javascript">
//QTags.addButton('ID', 'ボタンのラベル', '開始タグ', '終了タグ');
QTags.addButton('ed_subheading', '中見出し', '[hs]', '[/hs]');
QTags.addButton('ed_subsubheading.', '小見出し', '[hss]', '[/hss]');
</script>
<?php
}
add_action('admin_print_footer_scripts',  'add_my_quicktag', 100);

タグを置き換える SQL

ショートコード化して <h3> タグを手でちまちま書き換えていたのだけれど、キリがないのでデータベースを SQL で直接一括変換することにしました。（データベースのバックアップは忘れずに。）

UPDATE `wp_posts` SET `post_content` = REPLACE(`post_content`,'<h3>','[hs]')

だったら、はじめから <h3> タグを <h4> に SQL で変換すればいいじゃん、っていうツッコミはなしでお願いします。

関連記事

WordPress でエスケープしたショートコードが自動抜粋時に実行される不具合に対処

WordPress

たった 1 行！ WordPress で wp-caption の style 属性を削除または変更するカスタマイズ

WordPress

関連記事の表示を設定してみた【 Simple Tags 】

WordPress

【 2022 年 8 月版】 WP to Twitter で WordPress の記事を公開した時に自動でツイートする

WordPressWebサービス

WordPress を 2.8.4 にアップデート

WordPress

WordPress 2.7.1 にアップデート

WordPress