はじめに
WordPressテーマのhead.php
は、SEOタグやOGPタグ、メタ情報が集約される重要な場所ですが、直接HTMLタグを書き込むとコードが煩雑になり、管理や修正が大変になります。
そこで、これらのタグの出力を関数化し、head.php
をシンプルに保つ方法を解説します。関数化することで、メンテナンス性や再利用性が向上し、サイト全体の可読性も高まります。
※OGPの動的な設定方法や更新日時の自動出力については、【こちらの記事】も参考にしてください。
関数化はSEOタグの拡張や管理を楽にする基本テクニックです。
1. head.phpに直接タグを書くデメリット
直接head.php
にタグを記載すると、以下のような問題が発生します。
- コードが長く複雑になりがち: SEOタグやOGPタグが増えると、ファイルが非常に長くなり、可読性が低下します。
- 同じロジックが重複しやすい: SEOタグやOGPタグのロジックが各ページに埋め込まれていると、メンテナンス時に同じ修正を複数箇所に行う必要があります。
- SEOタグやOGP仕様変更時の修正が煩雑: 仕様変更があった際に、複数の箇所を修正する手間がかかります。
- テーマ内での再利用性が低い: 同じロジックを複数の場所で書く必要があるため、テーマの他の部分で再利用できません。
2. 関数化によるメリット
関数化することで、次のようなメリットが得られます。
- head.phpがすっきりと読みやすくなる: 複雑なタグのロジックを関数にまとめ、
head.php
自体をシンプルに保つことができます。 - SEOタグ・OGPタグのロジックを一括管理: タグ出力に関するロジックを関数化することで、一箇所でまとめて管理できます。
- メンテナンス性が大幅アップ: SEOやOGPの変更を1か所で行うことで、修正作業が迅速に行えます。
- 他のテンプレートやプラグイン連携もしやすい: 関数を使えば、テーマ全体やプラグインとの連携がしやすくなります。
- 変更や拡張が楽にできる: 新たなSEOタグやOGP仕様に対応するための変更が簡単に行えます。
3. 関数設計のポイント
関数設計時に押さえるべきポイントは以下の通りです。
- 役割ごとに関数を分ける: 例えば、SEOディスクリプション取得、OGP画像URL取得、canonicalタグ出力など、各関数は明確な役割を持つように設計します。
- 関数名や引数は分かりやすく命名: 名前が適切で直感的に分かる関数にすることで、コードの可読性が向上します。
- 値を返すか、直接出力するかを明確にする: 各関数は値を返すか、直接HTMLを出力するかを整理し、実装します。
- HTMLエスケープを忘れずに: セキュリティ面を考慮し、出力する際にはHTMLエスケープを行います。
4. 実装例:functions.phpに関数をまとめる
以下に、実際にfunctions.php
に記述する関数の実装例を示します。
SEOメタディスクリプション取得
function get_seo_description() {
$site_description = get_bloginfo('description');
if (is_front_page() || is_home()) {
return $site_description;
} elseif (is_singular()) {
global $post;
if (has_excerpt($post->ID)) {
$desc = wp_strip_all_tags(get_the_excerpt($post->ID));
} else {
$content = wp_strip_all_tags($post->post_content);
$desc = wp_trim_words($content, 30, '…');
}
return $desc ?: $site_description;
} elseif (is_category() || is_tag() || is_tax()) {
$term = get_queried_object();
return !empty($term->description) ? wp_strip_all_tags($term->description) : $site_description;
} elseif (is_404()) {
return 'お探しのページは見つかりませんでした。';
}
return $site_description;
}
カノニカルタグ出力
function mytheme_canonical_tag() {
if (is_paged()) {
return;
}
if (is_front_page()) {
$url = home_url('/');
} elseif (is_home()) {
$page_for_posts = get_option('page_for_posts');
$url = $page_for_posts ? get_permalink($page_for_posts) : home_url('/blog/');
} elseif (is_singular()) {
$url = get_permalink();
} elseif (is_category()) {
$url = get_category_link(get_queried_object_id());
} elseif (is_tag()) {
$url = get_tag_link(get_queried_object_id());
} elseif (is_tax()) {
$term = get_queried_object();
$url = $term && !is_wp_error($term) ? get_term_link($term) : '';
} elseif (is_post_type_archive()) {
$url = get_post_type_archive_link(get_post_type());
} elseif (is_author()) {
$url = get_author_posts_url(get_queried_object_id());
} else {
$url = home_url(add_query_arg([], $GLOBALS['wp']->request));
}
if ($url) {
echo '<link rel="canonical" href="' . esc_url($url) . '">' . "\n";
}
}
OGP画像URL取得
function get_og_image_url() {
if (is_front_page()) {
return get_template_directory_uri() . '/assets/images/ogp-front.png';
} elseif (is_home()) {
return get_template_directory_uri() . '/assets/images/ogp-home.png';
} elseif (is_singular() && has_post_thumbnail()) {
$img = get_the_post_thumbnail_url(get_queried_object_id(), 'full');
return $img ?: get_template_directory_uri() . '/assets/images/ogp-image.png';
}
return get_template_directory_uri() . '/assets/images/ogp-image.png';
}
5. head.phpでの呼び出し例
実装した関数をhead.php
で呼び出す方法です。
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="description" content="<?php echo esc_attr(get_seo_description()); ?>">
<?php if (function_exists('mytheme_canonical_tag')) mytheme_canonical_tag(); ?>
<meta property="og:title" content="<?php echo esc_attr(wp_get_document_title()); ?>">
<meta property="og:description" content="<?php echo esc_attr(get_seo_description()); ?>">
<meta property="og:image" content="<?php echo esc_url(get_og_image_url()); ?>">
<!-- 省略 -->
<?php wp_head(); ?>
</head>
6. まとめ
関数化することで、head.php
をスリム化し、テーマ全体の可読性と保守性を大幅に向上させることができます。特にSEOやOGPの仕様変更があった場合でも、1か所の修正で対応できる点が大きなメリットです。
テーマ開発時に関数化を取り入れ、管理や拡張を容易にしていきましょう。
お問い合わせ
本記事の内容に関する質問や、WordPressの開発に関するお悩みがあれば、ぜひこちらのお問い合わせフォームからご連絡ください。
あなたのWeb開発がもっと効率的に、効果的に進むよう、専門的なサポートを提供します。
今すぐ、あなたの問題を解決しませんか?