入れ過ぎはNG?WordPressでプラグインに頼らず実装したいカスタマイズ機能まとめ
結論:定番機能はプラグイン不要で実装可能
パンくずリスト、関連記事表示、ページネーション、人気記事ランキングなど、多くの定番カスタマイズはコードベースで実装可能です。
プラグインを使えば一見便利に見えますが、表示速度の低下・セキュリティホール・プラグイン同士の競合・開発終了のリスクなど、長期運用でのデメリットが見過ごせません。特に、シンプルな構成のブログや企業サイトでは、必要な機能だけをコードで絞って実装することで、サイトのパフォーマンスと安定性が大幅に向上します。
1. パンくずリストの自作
パンくずリストは、ユーザーに現在位置を示すだけでなく、Googleのクローラにページの構造を伝えるための重要な内部リンク構成要素です。以下は基本的な実装コード例(functions.php)です。
function custom_breadcrumb() {
echo '<nav class="breadcrumb"><a href="' . home_url() . '">HOME</a>';
if (is_category() || is_single()) {
echo " > ";
the_category(' > ');
if (is_single()) {
echo " > ";
the_title();
}
} elseif (is_page()) {
echo " > ";
echo the_title();
}
echo '</nav>';
}
表示したい箇所に<?php custom_breadcrumb(); ?>
と記述すればOK。schema.orgの構造化データに対応させる改良も可能です。
2. 関連記事の表示
関連記事は、サイト内の回遊性を高め、滞在時間やPVの増加に直結する施策です。以下はタグを使ったシンプルな実装例です。
<?php
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach ($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args = array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page' => 5
);
$related_query = new WP_Query($args);
if ($related_query->have_posts()) {
echo '<ul class="related-posts">';
while ($related_query->have_posts()) : $related_query->the_post();
echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
endwhile;
echo '</ul>';
}
wp_reset_postdata();
}
?>
タグ以外にカテゴリベースやカスタムフィールドベースでの絞り込みも可能です。
3. ページネーションの設置
通常の「次へ」「前へ」だけでなく、数字リンクを含むページネーションは、UXとSEO両面で重要です。以下はWP標準関数を使った例。
<?php
global $wp_query;
$big = 999999999;
echo paginate_links(array(
'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
'format' => '?paged=%#%',
'current' => max(1, get_query_var('paged')),
'total' => $wp_query->max_num_pages
));
?>
テーマに合わせてデザインを調整すれば、より洗練された見た目になります。SEOを意識するならrel="next"
などのマークアップも検討を。
4. 人気記事の表示(PV集計済み)
PV(閲覧数)を記録する仕組みさえ別途用意すれば、人気記事ランキングもプラグイン不要で実装可能です。以下は、PVをカスタムフィールドに記録している場合の表示例。
<?php
$args = array(
'meta_key' => 'post_views_count',
'orderby' => 'meta_value_num',
'order' => 'DESC',
'posts_per_page' => 5
);
$popular = new WP_Query($args);
if ($popular->have_posts()) :
echo '<ul class="popular-posts">';
while ($popular->have_posts()) : $popular->the_post();
echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
endwhile;
echo '</ul>';
endif;
wp_reset_postdata();
?>
PVカウントの仕組みとしては、set_post_meta()
を使ったカウント処理をfunctions.phpに追加し、wp_head
フックなどで呼び出すのが定番です。
5. 目次の自動生成(ショートコードで挿入&h2/h3が3つ以上で自動表示)
記事内に見出しが多い場合、冒頭に目次を設置することで読みやすさとSEOの両面で効果が期待できます。多くのサイトでは専用プラグインを使って目次を表示していますが、シンプルな要件であればコードでの自作も十分可能です。
ここでは、投稿タイプが「投稿(post)」のときに限り、<h2>
や<h3>
が3つ以上ある場合に目次を自動表示するカスタムショートコード[custom_toc]
を実装する方法を紹介します。
functions.php に以下を追加:
function generate_custom_toc_only_post() {
if (get_post_type() !== 'post') return '';
global $post;
$content = $post->post_content;
preg_match_all('/<h[23][^>]*>(.*?)<\/h[23]>/', $content, $matches, PREG_SET_ORDER);
if (count($matches) < 3) return '';
$toc = '<div class="custom-toc"><strong>目次</strong><ul>';
foreach ($matches as $i => $heading) {
$text = strip_tags($heading[0]);
$anchor = 'custom-toc-anchor-' . $i;
$content = preg_replace(
'/' . preg_quote($heading[0], '/') . '/',
str_replace('<h', '<h id="' . $anchor . '"', $heading[0]),
$content,
1
);
$toc .= '<li><a href="#' . $anchor . '">' . $text . '</a></li>';
}
$toc .= '</ul></div>';
remove_filter('the_content', 'do_shortcode');
$post->post_content = $content;
add_filter('the_content', 'do_shortcode');
return $toc;
}
add_shortcode('custom_toc', 'generate_custom_toc_only_post');
記事本文内の任意の位置に以下のショートコードを記述するだけで、目次が自動で表示されます。
[custom_toc]
CSSの例:
.custom-toc {
background: #f9f9f9;
border-left: 4px solid #007acc;
padding: 1em;
margin: 2em 0;
font-size: 0.95em;
}
.custom-toc strong {
display: block;
margin-bottom: 0.5em;
font-weight: bold;
}
.custom-toc ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.custom-toc li {
margin: 0.3em 0;
}
.custom-toc li a {
color: #007acc;
text-decoration: none;
}
.custom-toc li a:hover {
text-decoration: underline;
}
固定ページ(page)にも表示したい場合
初期コードでは投稿(post)のみに限定しているため、固定ページにも対応させたい場合は、以下のようにget_post_type()
の条件式を変更します。
修正前:
if (get_post_type() !== 'post') return '';
修正後:
if (!in_array(get_post_type(), array('post', 'page'))) return '';
これにより、post
とpage
の両方で目次が表示されるようになります。
特定のカスタム投稿にも表示したい場合
例えば、faq
というカスタム投稿にも目次を表示したい場合は、配列を使わずに条件をシンプルに追記することも可能です。以下のように、get_post_type()
に対する条件文を修正します。
修正前:
if (get_post_type() !== 'post') return '';
修正後(個別に追記):
if (get_post_type() !== 'post' && get_post_type() !== 'faq') return '';
これで、投稿(post)とカスタム投稿 faq のみで目次を表示するようになります。
補足:関数の冒頭は以下のようになります
function generate_custom_toc_only_post() {
if (get_post_type() !== 'post' && get_post_type() !== 'faq') return '';
global $post;
$content = $post->post_content;
...
配列を使うと複数対応の管理がしやすくなりますが、条件が2〜3個程度でコードを簡潔に保ちたい場合はこの書き方でも問題ありません。投稿タイプが1つ増えるごとに && get_post_type() !== 'xxx'
を追加する形になります。
まとめ:軽量で賢いWordPress運用を目指そう
WordPressは自由度が高い反面、プラグイン依存でサイトが重くなったり、トラブルが発生するリスクもあります。特に今回紹介したような汎用機能は、コードでの実装によってシンプルかつ安全なサイト構築が可能です。
もちろん、時間効率やメンテナンス性を優先してプラグインを使う判断も有効ですが、機能の本質とコードの中身を知っておくことが、結果的にサイトの成長と自分のスキル向上にもつながります。
カスタマイズを通じて、「本当に必要な機能だけを自分で制御できる」状態を目指していきましょう。
個別のWordPressカスタマイズや設計相談も承っておりますので、お気軽にご連絡ください。