ウェブサイト検索

WordPress チュートリアル: HTML から WordPress テーマを作成する方法 (パート 2)

  1. <スパン>1. WordPress チュートリアル: HTML から WordPress テーマを作成する方法 (パート 1)
  2. 2.現在読んでいる記事: WordPress チュートリアル: HTML から WordPress テーマを作成する方法 (パート 2)
  3. <スパン>3. WordPress テーマの構造の紹介

このチュートリアルのパート 1 では、HTML テンプレートを WordPress テーマに変換する基本について説明しました。少しでも興味がある方のために、HTML テンプレートを PHP ファイルに分割し、それらを元に戻し、WordPress テーマのスタイルと名前を付ける方法についていくつか学びました。本当に多くのことを学びました。この 2 回目のサービスを楽しむには、最初のチュートリアルで説明した概念をよく理解しておく必要があります。今日の投稿では、さらに一歩進んだ内容を取り上げます。完全に機能する WordPress テーマを作成できるように、さらにいくつかの領域について説明します。それでは、早速、始めましょう。

画像とJavaScriptファイルの構成

元の HTML テンプレート (index.html) に画像が含まれていた場合は、テンプレートを PHP ファイルに分割した後に画像が表示されなくなったことにおそらく気付いたでしょう。心配する必要はありません。これは PHP の仕様です。たとえば、ヘッダーセクションに次のようにロゴがあったとします。

<img alt="your_logo_alt_text" src="images/logo.jpg" />

…コードを少しいじる必要があります。この後説明するコードは、ブラウザがテーマのメイン ディレクトリのサブフォルダである (またはサブフォルダであるべき) 画像 フォルダ内でロゴ (またはその他の画像) を見つけるのに役立ちます。したがって、ヘッダー セクションにロゴを表示するには、header.php ファイルを開いて、上記のコードを次のコードに置き換えます。

<img alt="your_logo_alt_text" src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" />

get_template_directory_uri() 関数は、テーマ ディレクトリの URL を返します。したがって、ロゴを画像フォルダーに追加すると、コードはそのロゴを取得します。

何か違いがあることに気づきましたか?明らかに、このコードはロゴのみを修正します。他のイメージを修正するには、同様の方法でコードを書き直す必要があります。 簡単で簡単なものです。

JavaScript の話に移りましょう。 HTML Web サイトで JavaScript を使用している場合は、js という名前のフォルダーを作成し、そこにスクリプトを配置します。次のコードを使用して、header.php ファイル内でこれらを呼び出すことができます。

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/example.js"></script>

上記のコードでは、例としてexample.js を使用しています。その部分を JavaScript ファイルの名前に置き換えることを忘れないでください。

もちろん、他の人のためにテーマを作成している場合は、wp_enqueue_scripts を使用して js ファイルをロードする必要があります。詳細とヒントについては、WordPress テーマへの JavaScript の追加に関する AJ の投稿をご覧ください。

テンプレートファイル

このチュートリアルのパート 1 では、index.php、header.php、sidebar.php および footer.php という 4 つの基本的なテンプレート ファイルについて説明しました。テンプレート ファイルは、Web サイトが Web 上でどのように表示されるかを制御します。テンプレートは WordPress の MySQL データベースから情報を取得し、それを Web ブラウザーに表示される HTML コードに変換します。言い換えれば、テンプレート ファイルは WordPress テーマの構成要素です。テンプレートをより深く理解するために、テンプレート階層として知られる概念を詳しく見てみましょう。

たとえ話をしてみましょう。訪問者が http://www.yoursite.com/blog/category/your-category/ などのカテゴリ リンク (カテゴリへのリンク) をクリックすると、WordPress はテンプレート階層を利用して適切なファイル (およびコンテンツ) を生成します。以下で説明します。

  • まず、WordPress はカテゴリ ID に一致するテンプレート ファイルを探します。
  • カテゴリの ID がたとえば 2 の場合、WordPress は category-2.php という名前のテンプレート ファイルを探します。
  • category-2.php が利用できない場合、WordPress は category.php などの汎用カテゴリ テンプレート ファイルを使用します。
  • このテンプレート ファイルも利用できない場合、WordPress は archive.php などの汎用アーカイブ テンプレートを探します。
  • 汎用アーカイブ テンプレートが存在しない場合、WordPress はメイン テンプレート ファイル、index.php を使用します。

これが WordPress テンプレートの仕組みであり、これらのファイルを使用して、ニーズに合わせて WordPress テーマをカスタマイズできます。その他のテンプレート ファイルには次のものがあります。

home.php or index.php

ブログ投稿のインデックスをレンダリングするために使用されます

front-page.php

フロントページ表示の設定に従って静的ページまたは最新の投稿をレンダリングするために使用されます

single.php

単一の投稿ページをレンダリングするために使用されます

single-{post-type}.php

カスタム投稿タイプをレンダリングするために使用されます。 post-type が製品の場合、WordPress は single-product.php を使用します。

page.php

静的ページのレンダリングに使用されます

category.php or archive.php

カテゴリ アーカイブ インデックスのレンダリングに使用されます

author.php

著者をレンダリングするために使用されます

date.php

日付のレンダリングに使用されます

search.php

検索結果をレンダリングするために使用されます

404.php

サーバー 404 エラー ページをレンダリングするために使用されます

これはほんの短いリストであり、他にも多くの WordPress テンプレートがあります。テンプレートのトピックは大きなテーマであり、テンプレート ファイルの使い方を学ぶ最良の方法は、WordPress の広範なテーマ開発ライブラリを読むことです。あるいは、WordPress Codex で短いテンプレート セクションを読むこともできます。

テンプレートタグ

テンプレート ファイルを紹介したばかりなので、テンプレート タグと、WordPress テーマでテンプレート タグが果たす役割について、1 つか 2 つ言及するのは当然のことです。 WordPress.org によると、「…テンプレート タグは、情報を動的に表示したりブログをカスタマイズしたりするためにブログのテンプレート内で使用され、ブログを個性的で興味深いものにするためのツールを提供します。」

前のチュートリアルでは、get_header、get_sidebar、get_footer、bloginfo などのいくつかのテンプレート タグを学習しました。次のセクションでは、新しく作成した WordPress テーマにいくつかのテンプレート タグを追加します。 header.php ファイルにすでに DOCTYPE 宣言が含まれていることを前提としています。まだの場合は、次のコードをご覧ください。

<!DOCTYPE HTML>

DOCTYPE 宣言は、HTML コードに意味を与えます。それでは、HTML の開始タグを変更しましょう。次のように language_attributes タグ を使用して lang 属性を含めます。

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>

上記のコードは以下を生成します。

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

DOCTYPE 宣言と language_attribute タグを適切に配置すると、テーマの構造が正当になり、ブラウザーはコードを理解できるようになります。ブログのテーマを作成している場合は、ピンバック URL と RSS フィードへのリンクを頭の中に配置することが重要です。 header.php に次のコードを追加します。

<link title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" rel="alternate" type="application/rss+xml" /><link href="<?php bloginfo('pingback_url'); ?>" rel="pingback" />

RSS フィード (「rss2_url」) とピンバック (「pingback_url」) を含めるために bloginfo タグ をどのように使用したかに気づきましたか? header.php ファイルを保存する前に、次のコードも追加します。

<?php wp_head(); ?>

上記の wp_head タグは、プラグインに必要なスタイルシートと JavaScript ファイルを取り込みます。この小さなコードを省略すると、プラグインが期待どおりに動作しない可能性があります。それでは、もう一度 bloginfo タグを使用して、WordPress テーマにページ タイトルを追加しましょう。 header.php ファイルに次のコードを追加します。

<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>

最初のタグ wp_title はページまたは投稿のタイトルを追加し、2 番目のタグ bloginfo('name') はブログ名を追加します。 WordPress テーマにページ タイトルが付けられたので、テーマのスクリーンショットを作成し、テーマを再パッケージして、少し休んでみてはどうでしょうか?

テーマのスクリーンショットの作成

初めてテストテーマをアップロードしたとき、WordPress テーマパネルにスクリーンショットが欠けていることに気づいたはずです。特にカラフルなスクリーンショットを含む他のテーマを使用している場合は、単調に見えました。ただし、テーマのスクリーンショットを作成するのは非常に簡単ですので、ご安心ください。お気に入りの画像エディター (Adobe Photoshop など) を使用して画像を作成するか、テーマの画面を取得するだけです。画像が幅 600 ピクセル、高さ 450 ピクセルであることを確認してください。画像をテーマ フォルダに screenshot.png として保存します。すべての変更を保存し、テーマ フォルダーを ZIP アーカイブに圧縮します。テーマをアップロードしてアクティブ化すると、新しい変更が表示されます 😉

結論

この 2 番目のチュートリアルでは、静的 HTML から WordPress テーマを作成することについてより深い洞察が得られたと信じたいと思います。近い将来、WordPress テーマの他の側面についても紹介する予定ですが、それまでの間、あなたのために次のリソースを用意しました。

  • テンプレート – WordPress Codex
  • テンプレートタグ – WordPress Codex
  • HTML テンプレートから独自の WordPress テーマを作成 – SitePoint
  • 静的 HTML から WordPress テーマを作成する – WPtuts+

楽しく作成してください!