バックエンド

WordPress固定ページの設定方法をわかりやすく解説

WordPressで固定ページを設定する基本

ナカイ君: WordPressで固定ページ(page.php)の設定方法をわかりやすく教えてほしいな。

世界のアオキ: OK、固定ページってのは、ブログ投稿とは違って変わらない内容を表示するページのことだよ。たとえば、「お問い合わせ」や「会社概要」みたいなページがそれにあたるね。

ナカイ君: もっと具体的に教えてくれない?

世界のアオキ: もちろん。WordPressでは、管理画面から簡単に固定ページを作成できるんだ。管理画面の左側にある「ページ」をクリックして、「新規追加」を選ぶと、新しいページを作れるよ。ページのタイトルと内容を入力して、公開ボタンを押すだけでOKだね。

固定ページのカスタマイズ方法

ナカイ君: わかりやすいコードがあれば教えてほしいな。

世界のアオキ: たとえば、特定の固定ページだけで特別なデザインを適用したい場合、page.phpを編集するんだ。テーマのフォルダにあるpage.phpファイルが、固定ページのデフォルトのテンプレートになっているよ。

<?php get_header(); ?>

    <div id="primary" class="content-area">
        <main id="main" class="site-main">

        <?php
        while ( have_posts() ) :
            the_post();

            get_template_part( 'template-parts/content', 'page' );

            // コメントとコメントフォームの表示
            if ( comments_open() || get_comments_number() ) :
                comments_template();
            endif;

        endwhile; // End of the loop.
        ?>

        </main><!-- #main -->
    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

固定ページの実践的な使い方

ナカイ君: 具体的にはどうやって使うの?

世界のアオキ: たとえば、特定のページにカスタムCSSやJavaScriptを適用したい時は、functions.phpにコードを追加して、そのページだけに読み込ませることができるんだ。

function my_custom_scripts() {
    if ( is_page( '特定のページIDまたはスラッグ' ) ) {
        wp_enqueue_style( 'my-custom-style', get_stylesheet_directory_uri() . '/custom-style.css' );
        wp_enqueue_script( 'my-custom-script', get_template_directory_uri() . '/custom-script.js', array(), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

ナカイ君: 他のパターンがあれば教えてほしいな

世界のアオキ: あるページだけで特定のプラグインのショートコードを使いたい時もあるよね。その場合は、ページの本文に直接ショートコードを入力するか、page.phpで条件分岐を使って特定のページにだけコードを実行させることができるんだ。

ナカイ君: そうやって使えばいいんだね。

世界のアオキ: そういうわけで、固定ページを上手に使うと、サイトに多様性を持たせることができるんだ。ただし、カスタマイズする時は、子テーマを使うのがおすすめだよ。直接親テーマをいじると、アップデートの時に変更が消えちゃうからね。

ナカイ君: わかった、ありがとう!

WordPressで固定ページを設定する方法は、管理画面から「ページ」を選んで「新規追加」をするだけで簡単にできます。

さらに、page.phpをカスタマイズすることで、特定のページに特別なスタイルや機能を追加することが可能です。

実際にコードをいじる時は、子テーマを使うことで安全にカスタマイズできます。

これらの基本をマスターすれば、自分だけのオリジナルページを作成することができるようになります。


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

アーカイブ

  1. オンライン教材

    【React】初心者向け講座をリリースしました【MUI】【Udemy】
  2. オンライン教材

    【ChatGPT】エンジニア編をリリースしました
  3. バックエンド

    【Laravel第4弾】Vue.js3(CompositionAPI+Scrip…
  4. オンライン教材

    【AWS】【初心者向け】インフラの基礎からわかる講座をリリースしました【Udem…
  5. オンライン教材

    ChatGPTをビジネス活用する講座をリリースしました【Udemy】
PAGE TOP