バックエンド

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. バックエンド

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

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

    【ChatGPT】エンジニア編をリリースしました
  4. オンライン教材

    ChatGPTをビジネス活用する講座をリリースしました【Udemy】
  5. オンライン教材

    【React】初心者向け講座をリリースしました【MUI】【Udemy】
PAGE TOP
Ads Blocker Image Powered by Code Help Pro

広告ブロックを摘出しました!!

ブラウザ拡張を使用して広告をブロックしていることが摘出されました。

ブラウザの広告ブロッカーの機能を無効にするか、
当サイトのドメインをホワイトリストに追加し、「更新」をクリックして下さい。

あなたが広告をブロックする権利があるように、
当方も広告をブロックしている人にコンテンツを提供しない権利と自由があります。

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock