WordPressテーマの構造の紹介

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

少し前に、HTMLからWordPressテーマを作成する概念を紹介しました。チュートリアルを2つの部分に分割し、今日は2つのチュートリアルを具体化することに集中しているので、この投稿を投稿シリーズの3番目の配信と見なしてかまいません。私の目的は、WordPressテーマを分解して、それ(テーマ)がどのように機能するかを明確に示すことです.


この投稿は、HTMLとCSSの実用的な知識があることを前提としています。私は先に進み、HTMLとCSSのスキルを持つことがWordPressテーマを設計するための前提条件であることを宣言します。もう1つ、この投稿では大きな言葉や難しい概念は避けてください。理解しやすいので、楽しんで学習する準備をしてください。.

少しのHTMLプライミング

すべてのHTML Webページは、

鬼ごっこ。たとえば、体を壊すことができます()ウェブサイトをナビゲーション、ヘッダー、メインコンテンツ、サイドバー、フッターなどのいくつかのセクションに分割.

セクションにWebページを作成したら、CSSを使用して、必要に応じてセクションを注文(または配置)できます。このプロセスはスタイリングと呼ばれ、色、サイズ、境界線、特殊効果などの他のスタイル要素を追加することを含みます。これはCSSの力であり、ちなみに、カスケードスタイルシートの略です。 HTMlファイルとCSSファイルを組み合わせていくつかの画像を投入すると、完全なWebサイトになります。.

WordPressのテーマはそれほど大きな違いはありません。 HTMLからWordPressテーマを作成する方法のパート1で見たように、WordPressテーマは異なるファイルに分割されます。この時点でいくつかの類似点を見つけることができない場合は、説明させてください.

静的HTML Webページは、以下を使用して分割(以前はセクションと呼ばれていました)に分割されます

タグ(または本当に古い学校の場合はテーブル)。一方、WordPressテーマは異なるphpファイルに分割され、テンプレートタグを使用して元に戻されます.

したがって、すべてのbody要素(ヘッダー、メインコンテンツ、サイドバー、フッターなど)を(静的HTMLの場合のように)1つのファイルに置くのではなく、各body要素(WordPressテーマの場合)を別々のファイルに置く.

したがって、ヘッダーはheader.phpにあり、サイドバーはsidebar.phpにあり、メインコンテンツはindex.php、またはsingle.php(投稿の場合)またはpage.php(ページの場合)にあります。 )。フッターセクションは、footer.phpなどにあります。.

フォローしていますか?下の図をご覧ください。

html-wordpress = structure

上記のイラストから, , そして テンプレートタグと呼ばれます。彼らの仕事は、テーマディレクトリからheader.php、sidebar.php、footer.phpの順にフェッチし、index.phpにコンテンツを表示して、Webページを完成させることです。.

させてはいけない .php 拡張子が怖いので、phpファイル内のコンテンツは、使い慣れたHTMLコードにすぎません。たとえば、header.phpには一般的なHTMLリストナビゲーションを含めることができます。同様に、典型的なHTMLコードをfooter.php、sidebar.php、index.phpに配置できます.

配置することもできます loop.php index.php(または好きな場所)で関数を使用してブログ投稿を表示しますが、速度を落としてWordPressテーマの構造に戻る必要があります。 HTMLからWordPressテーマを作成する方法のパート2でループについて少し触れました。そして、私達はそれ(ループ)と将来的に他の機能について話します.

次へ…

基本的なWordPressテーマは、少なくとも次の4つのテンプレートファイルで構成されています。

  1. index.php
  2. header.php
  3. sidebar.php
  4. footer.php

これらのそれぞれに何が入るか見てみましょう 魔法の ファイル:

Index.phpテンプレートファイル

これはメインのファイルであり、WordPressのテーマが機能していません。これは、WordPress Webサイトにアクセスしたときに読み込まれる最初の(またはデフォルトの)ファイルです。 index.htmlと同等と考えてください.

WordPressテーマの典型的なindex.phpは次のようになります。





間にループを追加できます そして 以下に示すように、ホームページ(index.php)にブログ投稿を表示します。







Header.phpテンプレートファイル

このテンプレートファイルには、ヘッダーコード、ナビゲーション、HTMLヘッドコードが含まれています。基本的に、header.phpには、Webサイトの上部に表示するすべてのものが格納されています。ご存知のように、ウェブサイトのタイトルなど.

また、header.phpでCSSスタイルシートにリンクします。 header.phpの基本的な例を次に示します。





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







これはヘッダーセクションです。ここにロゴとその他の詳細を入力します.

Sidebar.phpテンプレートファイル

Sidebar.phpには、サイドバーに表示する必要があるすべてのものが含まれています。サイドバーには、追加のメニュー、ウィジェット、カテゴリ、ソーシャルメディアアイコン、カスタムコンテンツ、広告などのHTMLコードが含まれます.

Sidebar.phpには、必要に応じて、純粋なHTMLマークアップまたはphp関数呼び出しを含めることができます。そのため、基本的なsidebar.phpは次のようになります。

Footer.phpテンプレートファイル

footer.phpに何が入ると思いますか?ここに著作権情報、追加のメニュー、リンク、ソーシャルメディアアイコンなど、好きなものを入力できます。基本的なfooter.phpがどのように見えるか確認してみませんか?ここに:

必要に応じて、php関数呼び出しを含むフッターコンテンツをここに配置します(search.phpなどの異なるテンプレートファイルを取得するため)。.

に注意してください そして footer.phpのタグを閉じる?それらがフッター.phpに含まれる必要がある理由を推測できますか?同様に、理由を推測できますか そして 開始タグはheader.phpに含まれていますか?この投稿の最後にあるコメントセクションであなたの推測を教えてください��

上記で説明した4つのテンプレートファイルは、非常に基本的なWordPressテーマを構成します。他にも多くのテンプレートファイルがあります。コメント、検索結果、404エラーページなど、WordPressテーマに表示されるすべての要素のテンプレートファイルがあります。.

WordPressテーマの構造を完全に理解するには、さまざまなテンプレートファイルに慣れる必要があります。すべて閲覧できます WordPressで使用可能なテンプレートタイル.

次に、WordPressがテーマディレクトリからテンプレートファイルを取得するために使用するテンプレートタグがあります。あなたはについてもっと学ぶことができます テンプレートタグと、それらがWordPressで果たす役割.

概要

WordPressテーマは、次の解剖学的要素で構成されています。

  • index.php、header.php、search.php、category.phpなどのテンプレートファイル
  • などのテンプレートタグ ,
  • CSS
  • 画像およびその他のメディアファイル
  • JavaScriptファイル

そして、WordPressテーマの構造をまとめたイラストを次に示します。

学習を続けたいですか?詳細をチェックアウト WordPress Codexのテーマ構造ガイド.

結論

Webに表示されるすべてのWordPressテーマは、同じ解剖学的構造(人気のあるTotal WordPressテーマを含む)を使用します。これは、ニーズに合わせてカスタマイズできます。 WordPressテーマの開発の基本を理解したら、WordPressテーマでできること、またはWordPressテーマにできることに制限はありません。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map