WordPressテーマでカスタムページテンプレートを作成する

WordPressの最も重要なセールスポイントの1つは、テーマのアイデアです。 単一のテーマは、ウェブサイトのデザインと機能に大きな価値を追加します。 ただし、ページごとにデザインが異なるWebサイトがあります。

残念ながら、いくつかのWordPressテーマは、ユーザーが階層内の別のページのレイアウトと機能を変更することを制限しています。 WordPressカスタムページテンプレートを使用すると、ユーザーは特定のページの右/左サイドバー、追加の召喚機能、または特定のランディングページの一意のヘッダーなどのカスタム要件を統合できます。 WordPressカスタムページテンプレートがさまざまなタイプのコンテンツをどのように表示するかをさらに詳しく見ていきましょう。

カスタムWordPressページテンプレートは、さまざまな目的に使用できます。 いくつかのアイデアが含まれます：

• 各カテゴリの最近の投稿を表示する
• Googleマップまたは任意のスクリプトを埋め込む
• すべての著者のリスト。
• 最近アップロードされた画像
• ポートフォリオのカスタムデザインページ
• お問い合わせページ

WordPress Webサイトで作成されたすべてのページと投稿の外観は、 page.phpという名前のテンプレートファイルによって処理されます。 WordPressでカスタムページテンプレートを作成または編集するには、HTML、CSS、およびPHPの基本的な知識が必要です。

テキストエディタを開いて、次のコードを貼り付けるだけです。

 <？php / *テンプレート名：PageWithoutSidebar * /？>

上記のコード行は、WordPressにPageWithoutSidebarというテンプレートファイルであることを示しています。 任意の名前を使用できます。 次に、このファイルをPageWithoutSidebar.phpとして保存します。 ここでも、ファイルに他の名前を使用できます。 ただし、拡張子を.phpのままにしておくことを忘れないでください

次に、新しく作成したテンプレートファイルをテストします。

ホスティングパネルにログインします。 この例では、最速のマネージドWordPressホスティングであるCloudwaysを使用しています。 Cloudwaysは、AWS、DigitalOcean、GCP、Linode、Vultrのプロバイダーオプションを備えたWordPressアプリケーションをサポートしています。 / wp-content / themesフォルダーに移動します。 現在のテーマフォルダーを開き、そこにPageWithoutSidebar.phpファイルをアップロードします。

WordPress管理パネル>ページ>新規追加に移動します。 右側に新しいカスタムページテンプレートが表示されます。

新しいページを作成し、そのテンプレートをPageWithoutSidebarに設定します。 完了したら、公開します。

新しく作成したページを開きます。 テンプレートにはまだデザイン要素がないため、下の画像のような空白のページが表示されます。

これは、WordPressのカスタムページテンプレートが正常に実装されていることを示しているため、カスタムレスポンシブWordPressテーマを作成できます

次に、ページのコンテンツを表示するために数行のコードを追加します。

このデモでは、デフォルトのTwentySixteenページテンプレートをカスタマイズする方法について説明します。

ページのデフォルトの外観は、 / wp-contents / themes / YOUR THEME /フォルダーにあるpage.phpファイルによって生成されます。 page.phpを開き、このコードをコピーします。

 <？php get_header（）; ？>

<div class = "content-area">
                <main class = "site-main" role = "main">
                                <？php
                                //ループを開始します。
                                while（have_posts（））：the_post（）;

                                                //ページコンテンツテンプレートを含めます。
                                                get_template_part（ 'template-parts / content'、 'page'）;

                                                //コメントが開いているか、少なくとも1つのコメントがある場合は、コメントテンプレートをロードします。
                                                if（comments_open（）|| get_comments_number（））{
                                                                Comments_template（）;
                                                }

                                                //ループの終わり。
                                終わり;
                                ？>

                </ main> <！-。site-main->

                <？php get_sidebar（ 'content-bottom'）; ？>

</ div> <！-。content-area->

<？php get_sidebar（）; ？>
<？php get_footer（）; ？>

このコードをPageWithoutSidebar.phpのこのコード行のすぐ下に貼り付けます。

 <？php / *テンプレート名：PageWithoutSidebar * /？>

それを保存！

完全なPageWithoutSidebar.phpファイルは次のようになります。

 <？php / *テンプレート名：PageWithoutSidebar * /？>

<？php get_header（）; ？>

<div class = "content-area">

                <main class = "site-main" role = "main">

                                <？php

                                //ループを開始します。
                                while（have_posts（））：the_post（）;

                                                //ページコンテンツテンプレートを含めます。
                                                get_template_part（ 'template-parts / content'、 'page'）;

                                                //コメントが開いているか、少なくとも1つのコメントがある場合は、コメントテンプレートをロードします。
                                                if（comments_open（）|| get_comments_number（））{

                                                                Comments_template（）;

                                                }

                                                //ループの終わり。
                                終わり;

                                ？>

                </ main> <！-。site-main->

                <？php get_sidebar（ 'content-bottom'）; ？>

</ div> <！-。content-area->

<？php get_sidebar（）; ？>

<？php get_footer（）; ？>

ページに戻って更新します。 デフォルトのWordPressTwentySixteenテーマと同じようにすべてが機能していることがわかります。

それでは、カスタマイズしましょう。 ご覧のとおり、右側にサイドバーがあります。 このページからのみ削除します。 他のすべてのページは、TwentySixteenテーマのデフォルトの外観になります。

PageWithoutSidebar.phpファイルを開きます。 ファイルの終わりまで下にスクロールして、以下を削除します。

 <？php get_sidebar（）; ？>

これは、ページのサイドバーを取得するコード行です。 行を削除したら、保存します。 ページのURLを開くと、サイドバーはもうありません！

ご覧のとおり、サイドバーはこのページから正常に削除されています。 ただし、テキストの配置は適切ではありません。 右側に空白があります。 修正は、画面全体にテキストを揃えて拡張することです。

PageWithoutSidebar.phpに戻り、以下を見つけます。

 <div class = "content-area">

「 content-area 」を「 site-content-fullwidth 」に変更するだけで完了です。 ページを更新すると、コンテンツが全幅になります。

page.phpファイルを簡単に編集できたのに、なぜカスタムページテンプレートを作成したのか、まだ興味がありますか？ page.phpファイルを編集すると、Webサイト全体のすべてのページに変更が表示されることは明らかです。 特定のページにカスタマイズされた外観を適用するには、WordPressのカスタムページテンプレートが便利です。 ユーザーにさまざまな特権を割り当てるために、WordPressでカスタムユーザーロールを定義することもできます。

ご不明な点がございましたら、下のコメント欄に投稿してお気軽にお問い合わせください。