独自のWordPressテーマを作成する

公開: 2021-12-21

以前の記事では、WordPress Webサイトをカスタマイズする方法、独自の子テーマまたはテンプレートを作成する方法について説明しました。

今日は、独自のWordPressテーマを作成する方法を見ていきます。さあ行こう！

なぜあなた自身のWordPressテーマを構築するのですか？

WordPressはあなたのウェブサイトをカスタマイズするための複数の方法を提供します。では、なぜあなたはあなた自身のテーマを作成する必要性を感じるのでしょうか？場合によっては、既製のテーマがブランドデザインに合わなかったり、必要な機能を備えていなかったりすることがあります。カスタムテーマはこの問題を解決し、サードパーティのテーマに依存することなく、必要なすべての機能を備えたサイトのスタイルを正確に提供できます。

テーマを作成する前の要件

以下の例で次の手順を複製できるようにするには、WordPressのインストールをセットアップし、ローカルまたは管理するサーバースペースで準備する必要があります。ライブサイトでこれを試さないでください。代わりに、テスト環境を作成してください。

CSS、PHP、HTMLの実用的な知識と理解も必要です。

テーマを作成する

テーマに「私の最初のテーマ」という名前を付けます。最初のステップは、テーマが管理領域に表示されるようにするために必要なファイルを作成することです。これを行うには、style.cssファイルとindex.phpファイルを作成します。

「my-first-theme」という名前のwp-content/themes /フォルダーの下に、テーマのサブフォルダーを作成し、これら2つのファイルをそのフォルダーに追加します。

この時点で、テーマは管理領域に選択肢として表示されているはずです。

これらのファイルのいずれかが欠落している場合は、テーマが壊れていることを警告するメッセージが表示されます。たとえば、index.phpが欠落している場合は、次のように表示されます。

style.cssファイル内に、WordPressにテーマについて伝えるコメントを追加します。最も重要な情報は、その下にリストされる名前です。それ以外に、作成者が誰であるかを指定したり、作成者URIを指定して、ユーザーがWebサイトにアクセスしてテーマについて詳しく知ることができるようにすることができます。管理テーマのモーダルポップアップに表示される説明とインストールのバージョンを指定します。

 /* Theme Name: My First Theme Author: Dev Loper Author URI: https://my-first-theme.com Description: This is my theme's description Version: 1.0 */

注：ライセンスを定義することもできます。テーマをWordPressで配布する場合は、テーマがGPL互換である必要があります。

ロゴ画像を表示する必要がある場合は、style.cssファイルとindex.phpファイルが配置されているのと同じスペースにscreenshot.pngファイルを挿入します。

テーマの管理画面でテーマをアクティブにすると、次のように表示されます。

そして、「テーマの詳細」をクリックすると、次のように表示されます。

テーマファイル

次に、index.phpファイルにコードを記述します。テストとして、お気に入りのエディタでファイルを開き、たとえば、あらゆる種類のHTML要素を挿入します。

 <h1>My First Theme's Content</h1>

ファイルを保存して、フロントエンドにアクセスします。「私の最初のテーマのコンテンツ」という見出しのみが表示されます。

この時点で、テーマのレイアウトを決定する必要があります。

テーマレイアウト

ここからのルートは無制限です。時間をかけてWordPressのテーマがどのように機能するかを研究することを強くお勧めします。さらに重要なことは、独自のテーマの構築に進む前に、テンプレートの階層を完全に理解していることを確認してください。

一言で言えば、WordPressが行うことは、コンテンツのタイプに応じて異なるphpファイルを呼び出す方法を提供することです。これはクエリで実行されます。クエリは、現在表示されているページに投稿があるか、検索結果ページまたはその他の種類のコンテンツであるかを確認し、対応するコードを出力します。

典型的な例は、ヘッダーとフッターごとに個別のファイルを作成して、ヘッダーとフッターを分離することです。これを自分で行う方法の非常に単純化された例を確認するには、このコードをindex.phpファイルに挿入します。

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

このコードは、wp_head（）およびwp_footer（）で構築されたWordPress関数を使用して、ロゴ、タイトル、メニューを含むヘッダー、クエリが適切なコンテンツを表示する本体、およびサイトの情報を含むフッターを含むデフォルトのコンテンツレイアウトを提供します。

このコードを分割して、header.phpファイルとfooter.phpファイルを別々に使用する場合は、テーマのフォルダーの下にファイルを作成する必要があります。

そして、次のようにコードを分割します。

Index.php

 <?php get_header(); ?> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <?php get_footer();

Header.php

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header>

Footer.php

 <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

以上です！最初のテーマを作成しました。

スターターテーマ

上記では、テーマを手動で作成する方法、作成する必要のあるファイル、含めることができるコードについて説明しました。ただし、すでにこれに精通している場合は、WordPressスターターテーマを数秒でダウンロードすることで時間を節約できます。たとえば、アンダースコアを試してみてください。名前を付けて、テーマのzipファイルをすぐにダウンロードできます。

素晴らしいですよね？

結論

カスタムWordPressテーマは、開発者としてより柔軟性が必要な場合に最適なソリューションです。テーマの作成は困難なプロセスのように思えます。うまくいけば、この記事が示しているように、実際には非常に簡単です。重要なのは、コーディングを開始する前に急がないことです。一歩下がって、要件を満たすテーマ構造を研究してから、それを実行してください。