【WordPress】記事ページにSectionタグを自動で追加する方法【WP】
更新日：
ルナリス
記事をSectionタグで囲んでSEO対策したいけどいちいち書くのが面倒！
ルナリス
というわけで自動で記述するようにしたわ
科学のちからってスゲー！
ソルト
今回の目的
Sectionタグを使うことで正しいhtmlの記述をし、記事の評価を上げる事が目的です。
しかし、毎回手動でSectionタグを入れることは大変手間がかかり、労力に対して効果が見合っていません。(ほとんどのサイトはSectionタグを使用していないため、そこまで重要ではない)
そこで、自動でSectionタグを入れてくれるようにWordPressのテーマを改造しようと考えました。
今回は自動で記事本文にSectionタグを追加するプログラムを作成したので、紹介したいと思います。
Sectionタグを使う理由
htmlの正しい記述の仕方は、以下のようになります。
<section> <h2>タイトル1</h2> <p>テキスト1</p> <section> <h3>タイトル2</h3> <p>テキスト2</p> </section> </section> <section> <h2>タイトル3</h2> <p>テキスト3</p> </section>
タイトルごとにSectionで囲むことによって段落分けを定義します。
しかし、このSectionタグを使用・正しく利用しているサイトはほとんどありません。
Sectionタグを使用することによってhtmlを正しく記述し、他サイトよりも少しでも評価が上がるように対策しましょう。
記事ページにSectionタグを追加するプログラム
本題のSectionタグを追加するプログラムをご紹介します。
前提として、記事タイトルがH1, サブタイトルがH2と正しい運用がされている事。
Hタグがない場合もOK
functions.phpに記事本文を調整するプログラムを記述します。
<?php
//本文出力
function the_content_section(){
$main_txt_array = explode('<h2', get_the_content() );
$main_txt = '';
foreach( $main_txt_array as $value ){
if( preg_match('/.*<\/h2>/', $value ) ){
$value = "<h2".$value;
}
$value = str_replace("<h","\n</section>\n<section>\n<h",$value);
$value = preg_replace("/\\n<\/section>/", "", $value,2);
if( substr_count( $value, '<h' ) > 1 ){
$value = $value."\n</section>\n</section>";
} else if( substr_count( $value, '<h' ) == 1 ){
$value = $value."\n</section>";
}
$main_txt = $main_txt . $value;
}
$main_txt = apply_filters( 'the_content', $main_txt );
$main_txt = str_replace( ']]>', ']]>', $main_txt );
echo $main_txt;
}
?>
加工した本文の出力
functions.phpに記述した関数を読み込むことでSectionタグを追加した本文を表示することができます。
single.phpやpage.phpにて、本文を表示したいところに以下の文を書きます。
<?php the_content_section(); ?>
プログラムの解説
- get_the_content()で記事本文を取得
- 本文を「h2」開始タグで区切る
- 区切った分だけループ処理
- 各「h」タグの前に「section」タグを追記
- 出来上がった本文をthe_contentで出力
まとめ
今回はWordpressの記事本文に自動でSectionタグを追加するプログラムを紹介しました。
Sectionタグを使うことで正しいhtmlの記述をし、記事の評価の向上に繋がったと思います。
ルナリス
Sectionタグ以外の物も追加で記述できるから、自分で色々改造してみて！
コメント一覧