WordPress テーマの構造の紹介
- <スパン>1. WordPress チュートリアル: HTML から WordPress テーマを作成する方法 (パート 1)
- <スパン>2. WordPress チュートリアル: HTML から WordPress テーマを作成する方法 (パート 2)
- 3.現在読んでいる: WordPress テーマの構造の概要
少し前に、HTML から WordPress テーマを作成するという概念を紹介しました。チュートリアルを 2 つの部分に分割しており、今日は 2 つのチュートリアルを具体的に説明することに専念しているため、この投稿を投稿シリーズの 3 回目と考えていただいて構いません。私の目的は、WordPress テーマを分解して、それ (テーマ) がどのように機能するかを明確に理解することです。
この投稿は、HTML と CSS に関する実践的な知識があることを前提としています。先に進んで、HTML と CSS のスキルを持っていることが WordPress テーマを設計するための前提条件であると宣言します。もう 1 つ、この投稿では難解な言葉や難しい概念を避けます。理解しやすい内容になっているので、楽しみながら学ぶ準備をしてください。
ちょっとした HTML の準備
すべての HTML Web ページは、<div> タグを使用してさまざまな部分に分割されます。たとえば、Web サイトの本文 (<body>) を、ナビゲーション、ヘッダー、メイン コンテンツ、サイドバー、フッターなどのいくつかのセクションに分割できます。
Web ページをセクションに分割したら、CSS を使用してセクションを自由に順序付け (または配置) できます。このプロセスはスタイリングとして知られており、色、サイズ、境界線、特殊効果などの他のスタイル要素の追加が含まれます。これが CSS の能力です。ちなみに、CSS は Cascading Style Sheets の略です。 HTMl ファイルと CSS ファイルを組み合わせていくつかの画像を追加すると、完成した Web サイトが完成します。
WordPress テーマでも状況はそれほど変わりません。 「HTML から WordPress テーマを作成する方法」のパート 1 で見たように、WordPress テーマはさまざまなファイルに分割されます。この時点で類似点が見つからない場合は、説明させてください。
静的 HTML Web ページは、<div> タグ (または、本当に昔ながらの場合はテーブル) を使用して、セクション (前にセクションと呼んだもの) に分割されます。一方、WordPress テーマはさまざまな php ファイルに分割され、テンプレート タグを使用して再びまとめられます。
したがって、すべての本文要素 (ヘッダー、メイン コンテンツ、サイドバー、フッターなど) が 1 つのファイル内に存在する (静的 HTML の場合のように) のではなく、各本文要素 (WordPress テーマ内) が個別のファイル内に存在します。
したがって、ヘッダーは header.php に存在し、サイドバーはsidebar.phpに存在し、メインコンテンツはindex.php、またはsingle.php (投稿の場合)、またはpage.php (ページの場合)に存在します。 ）。フッターセクションは footer.php などに存在します。
フォローしていますか？以下の図を確認してください。
上の図から、 <?php get_header(); ?>、<?php get_sidebar(); ?> および <?php get_header(); ?> はテンプレートタグと呼ばれます。彼らの仕事は、テーマ ディレクトリから header.php、sidebar.php、footer.php をこの順序で取得し、index.php にコンテンツを表示して、Web ページを完成させることです。
.php 拡張子を見て怖がらないでください。php ファイル内のコンテンツは、見慣れた単なる HTML コードです。たとえば、header.php には典型的な HTML リスト ナビゲーションを含めることができます。同様に、一般的な HTML コードを footer.php、sidebar.php、index.php に配置できます。
また、index.php (または好きな場所) に loop.php 関数を配置してブログ投稿を表示することもできますが、ここではゆっくりと WordPress テーマの構造に戻る必要があります。 HTML から WordPress テーマを作成する方法のパート 2 で、ループについて 1 つまたは 2 つ言及しました。それ (ループ) と他の機能については将来説明する予定です。
次に進みます…
基本的な WordPress テーマは、少なくとも 4 つのテンプレート ファイルで構成されます。
- インデックス.php
- header.php
- サイドバー.php
- フッター.php
これらの魔法の ファイルのそれぞれに何が入っているのか見てみましょう。
Index.php テンプレート ファイル
これがメインのファイルであり、これがなければ WordPress テーマを動作させることができません。これは、WordPress Web サイトにアクセスしたときに最初に読み込まれる (またはデフォルトの) ファイルです。これは、index.html と同等であると考えてください。
WordPress テーマの一般的な Index.php は次のようになります。
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?><?php get_header(); の間にループを追加できます。 /> と <?php get_sidebar(); ?> 以下に示すように、ホームページ (index.php) にブログ投稿を表示します。
<?php get_header(); ?>
<div class="content">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-header">
<div class="date"><?php the_time( 'M j y' ); ?></div>
<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="author"><?php the_author(); ?></div>
</div><!--end post header-->
<div class="entry clear">
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?>
</div><!--end entry-->
<div class="post-footer">
<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
</div><!--end post footer-->
</div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<div class="navigation index">
<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
</div><!--end navigation-->
<?php else : ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Header.php テンプレート ファイル
このテンプレート ファイルには、ヘッダー コード、ナビゲーション、および HTML ヘッド コードが含まれています。基本的に、header.php には、Web サイトの上部に表示するすべてのものが保存されます。ウェブサイトのタイトルなどです。
header.php 内の CSS スタイルシートにもリンクします。 header.php の基本的な例を次に示します。
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body>
<div class="header">
<p>This is header section. Put your logo and other details here.</p>
</div>Sidebar.php テンプレート ファイル
Sidebar.php には、サイドバーに表示するために必要なものがすべて含まれています。サイドバーには、追加のメニュー、ウィジェット、カテゴリ、ソーシャル メディア アイコン、カスタム コンテンツ、広告などの HTML コードが含まれています。
Sidebar.php には、ニーズに応じて純粋な HTML マークアップまたは php 関数呼び出しを含めることができます。したがって、基本的なsidebar.phpは次のようになります。
<div class="sidebar">
Put your custom content or HTML code here.
</div>Footer.php テンプレート ファイル
footer.php には何が入ると思いますか?ここに著作権情報、追加メニュー、リンク、ソーシャル メディア アイコンなど、何でも好きなものを入れることができます。基本的な footer.php がどのように見えるか見てみたいですか?ここ：
<footer class="footer">
Put your footer content here including php function calls (to fetch different template files e.g. search.php) if need be.
</footer>
</body>
</html>footer.php の