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のあり方です。たとえば、ヘッダーセクションに次のようなロゴがある場合…

your_logo_alt_text

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

your_logo_alt_text

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

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

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

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

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

テンプレートファイル

このチュートリアルのパート1では、4つの基本的なテンプレートファイルについて説明しました。 index.php、header.php、sidebar.php そして footer.php. テンプレートファイルは、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またはindex.phpブログ投稿のインデックスをレンダリングするために使用されます
front-page.php静的ページまたは最新の投稿をフロントページディスプレイで設定されたとおりにレンダリングするために使用されます
single.php単一の投稿ページをレンダリングするために使用されます
single- {post-type} .phpカスタム投稿タイプのレンダリングに使用されます。 post-typeが製品の場合、WordPressはsingle-product.phpを使用します
page.php静的ページのレンダリングに使用されます
category.phpまたは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コードに意味を与えます。これで、HTMLの開始タグを変更してみましょう。を使用してlang属性を含めます language_attributesタグ そのようです:

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

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

私たちがどのように採用したかに気づきましたか bloginfoタグ RSSフィード( ‘rss2_url’)とpingback( ‘pingback_url’)を含めるには? header.phpファイルを保存する前に、次のコードも追加します。

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

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

最初のタグ wp_title ページまたは投稿のタイトルを追加します 2番目のタグbloginfo( ‘name’)はブログ名を追加します。 WordPressテーマにページタイトルが付いたので、テーマのスクリーンショットを作成し、テーマを再パッケージ化して休憩しませんか??

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

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

結論

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

幸せな作成!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me