お問い合わせ

LINEお問い合わせ

脱・プラグイン依存！WordPress高速化のための“自作”テクニック大全
WordPress活用TIPS

WordPressを軽く保つ！プラグインなしで実現する便利機能の作り方まとめ

結論：便利機能も“プラグインレス”で実現可能！

WordPressはプラグインを使えば機能拡張が簡単ですが、入れすぎはサイト速度やSEOに悪影響を及ぼします。実は、代表的な便利機能の多くは、HTML・CSS・JavaScript・PHPの組み合わせで簡単に自作可能です。

本記事では「パンくずリスト」「スライダー」「人気記事」「目次」「SNSシェアボタン」「関連投稿」「ページネーション」「ライトボックス」「ローディングアニメーション」など、よく使われる機能をプラグインに頼らず実装する方法をまとめました。

1. SEOに効く！パンくずリストの自作（schema.org対応）

パンくずはユーザビリティ向上と同時に、Google検索にも影響する重要要素です。以下はカテゴリベースのシンプルな構造にschema.orgを対応させた例です。

<?php
if (!is_front_page()) {
  echo '<nav class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">';
  echo '<ul>';
  echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="' . home_url() . '"><span itemprop="name">ホーム</span></a>
    <meta itemprop="position" content="1" /></li>';

  if (is_category() || is_single()) {
    $cat = get_the_category();
    if ($cat) {
      echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="' . get_category_link($cat[0]->term_id) . '"><span itemprop="name">' . $cat[0]->name . '</span></a>
        <meta itemprop="position" content="2" /></li>';
    }
    if (is_single()) {
      echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <span itemprop="name">' . get_the_title() . '</span>
        <meta itemprop="position" content="3" /></li>';
    }
  }
  echo '</ul></nav>';
}
?>

2. プラグイン不要のスライダー実装（Slick.js使用）

Slick.jsを読み込めば、高機能なスライダーも簡単に構築可能。以下は投稿サムネイルを使ったトップページ用の例です。

Slickの読み込み（header.phpなど）

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

HTML出力例（front-page.phpなど）

<div class="slider">
  <?php
  $args = array('posts_per_page' => 5);
  $slider_query = new WP_Query($args);
  while ($slider_query->have_posts()) : $slider_query->the_post(); ?>
    <div>
      <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail('large'); ?>
        <p><?php the_title(); ?></p>
      </a>
    </div>
  <?php endwhile; wp_reset_postdata(); ?>
</div>

初期化スクリプト

<script>
  jQuery(document).ready(function($){
    $('.slider').slick({
      autoplay: true,
      dots: true,
      arrows: false
    });
  });
</script>

3. プラグイン不要！人気記事ランキングの自作方法

人気記事ランキングはアクセス数に基づいて表示されますが、プラグインでは重くなりがちです。以下は簡易的にPVを記録し、上位を表示する方法です。

functions.php にPV保存機能を追加

// 投稿閲覧時にPVを加算
function set_post_views($postID) {
  $count_key = 'post_views_count';
  $count = get_post_meta($postID, $count_key, true);
  if ($count == '') {
    $count = 0;
    delete_post_meta($postID, $count_key);
    add_post_meta($postID, $count_key, '1');
  } else {
    $count++;
    update_post_meta($postID, $count_key, $count);
  }
}
function track_post_views($post_id) {
  if (!is_single()) return;
  if (empty($post_id)) {
    global $post;
    $post_id = $post->ID;
  }
  set_post_views($post_id);
}
add_action('wp_head', 'track_post_views');

人気記事を表示（ウィジェットやトップページなど）

<?php
$args = array(
  'posts_per_page' => 5,
  'meta_key' => 'post_views_count',
  'orderby' => 'meta_value_num',
  'order' => 'DESC'
);
$popular = new WP_Query($args);
while ($popular->have_posts()) : $popular->the_post();
?>
  <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; wp_reset_postdata(); ?>

4. プラグイン不要の自動目次の作り方

目次機能は「Table of Contents」系プラグインが有名ですが、静的な目次ならJavaScriptで自作可能です。

HTML：目次挿入位置

<div id="toc"></div>

JavaScript：h2要素を自動抽出して目次生成

<script>
document.addEventListener("DOMContentLoaded", function() {
  const toc = document.getElementById("toc");
  const headers = document.querySelectorAll("h2");
  if (headers.length > 0) {
    let list = "<ul>";
    headers.forEach((h, index) => {
      const id = "toc_" + index;
      h.setAttribute("id", id);
      list += `<li><a href="#${id}">${h.textContent}</a></li>`;
    });
    list += "</ul>";
    toc.innerHTML = list;
  }
});
</script>

5. 軽量なSNSシェアボタンの自作

シェアボタン系のプラグインは外部スクリプトが多く、表示速度に悪影響を与えます。以下は最低限のシェアURLリンクです。

HTMLコード例

<div class="sns-share">
  <a href="https://twitter.com/intent/tweet?url=<?php echo urlencode(get_permalink()); ?>&text=<?php echo urlencode(get_the_title()); ?>" target="_blank">Twitter</a>
  <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink()); ?>" target="_blank">Facebook</a>
  <a href="https://social-plugins.line.me/lineit/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank">LINE</a>
</div>

必要に応じて、アイコンフォントや画像で装飾可能です。

6. 関連記事の自作（カテゴリ・タグベース）

関連記事表示は「YARPP」などの有名プラグインがありますが、重くなる原因にも。以下はカテゴリベースの関連投稿表示例です。

<?php
$categories = get_the_category();
if ($categories) {
  $cat_ids = array();
  foreach ($categories as $cat) {
    $cat_ids[] = $cat->term_id;
  }

  $args = array(
    'category__in' => $cat_ids,
    'post__not_in' => array(get_the_ID()),
    'posts_per_page' => 4
  );
  $related = new WP_Query($args);
  if ($related->have_posts()) {
    echo '<ul class="related-posts">';
    while ($related->have_posts()) : $related->the_post(); ?>
      <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <?php endwhile;
    echo '</ul>';
    wp_reset_postdata();
  }
}
?>

7. ページネーションの自作

標準関数paginate_links()やthe_posts_pagination()を使えば、十分なページナビゲーションが可能です。

<div class="pagination">
  <?php
  echo paginate_links(array(
    'prev_text' => '« 前へ',
    'next_text' => '次へ »',
    'type' => 'list'
  ));
  ?>
</div>

CSSで `.pagination ul li` を装飾すれば、好きなデザインにできます。

8. 画像にライトボックス機能を追加（Fancybox利用）

画像クリックで拡大表示する「ライトボックス」機能は、Fancyboxなどの軽量JSで実装可能です。

読み込みコード（footerやhead）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>

画像リンクの例

<a data-fancybox="gallery" href="大きな画像.jpg">
  <img src="サムネイル.jpg" alt="拡大表示">
</a>

9. ローディングアニメーションの導入

ローディング演出はCSSと簡単なJSで実装できます。以下はフェードアウトするローディング画面の例です。

HTML

<div id="loader">Loading...</div>

CSS

#loader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-size: 20px;
}
body.loaded #loader {
  display: none;
}

JavaScript（footer）

<script>
  window.addEventListener('load', function() {
    document.body.classList.add('loaded');
  });
</script>

まとめ：WordPressは“軽さ”と“機能性”を両立できる

今回ご紹介した機能は、すべてプラグインなしで実装可能です。
必要な機能を自作すれば、無駄な読み込みや競合を避け、SEOや表示速度にも好影響を与えます。

「便利だから入れる」から「必要だから作る」へ。WordPressをもっと快適に使いこなすために、ぜひ今回の方法を活用してみてください。
なお、記載のコードはあくまでサンプルなので、カスタム投稿に対応させる場合は記述の変更・追加が必要なものもあります。こういった方法で自作できるんだという参考程度にご確認下さい。

運営サイト
現在 80 件のFAQを公開中！
SEO対策ラボ

SEO対策ラボ

SEOに関するあらゆる疑問を解決するFAQサイト

SEO歴15年以上のノウハウをもとに、よくある質問・トラブル・改善方法をわかりやすく解説。現場目線のリアルな情報を発信しています。
現在 50 件のFAQを公開中！
MEO対策ラボ

MEO対策ラボ

Googleマップ集客に強くなるためのFAQサイト

Googleビジネスプロフィールの活用や口コミ対策、店舗集客のノウハウをFAQ形式でわかりやすく解説。実店舗のMEO強化を支援します。
CONTACT

お問い合わせ

まずはお気軽にお問い合わせください

ご相談やご質問だけでも大歓迎です。
フォームまたはLINEよりご連絡ください。

お問い合わせフォーム LINEで相談する
SEO無料診断
お問い合わせ
LINE相談