【WordPress】記事ページにSectionタグを自動で追加する方法【WP】

更新日:

WordPress Sectionタグ

 

 

ルナリス

ルナリス

記事を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( ']]>', ']]&gt;', $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タグ以外の物も追加で記述できるから、自分で色々改造してみて!


コメント一覧

コメントを残す

メールアドレスが公開されることはありません。