WordPressテーマのチートシートを使って、手持ちのテーマを素早く変更したり、新しいカスタマイザーを作成したりしたいですか？WordPressには多くのビルトイン・テンプレートタグが用意されており、それらを使って最初の一歩を踏み出すことができます。この投稿では、初心者向けのWordPressテーマ・チートシートを紹介します。
始める前に
WordPressには強力なテンプレートエンジンが搭載されており、テーマ開発者はWordPressを利用したサイトの美しいデザインを作成することができます。あなたのサイトにインストールできるWordPressテーマには、プレミアムと無料のものがあります。
各WordPressテーマには、数多くのカスタマイズオプションが用意されています。これらのオプションを使用すると、色を変更したり、ヘッダー画像を追加したり、ナビゲーションメニューを設定したりすることができます。
しかし、テーマがサポートする機能は限られています。時には、WordPressテーマに若干の変更を加えたいと思うかもしれませんが、それにはコーディングが必須です。そのためには、基本的なPHP、HTML、CSSの知識が必要です。
まず最初に、WordPressが舞台裏でどのように動いているのか、そしてWordPressのテーマ・テンプレートに慣れることだ。
その後、いくつかのベストプラクティスに従うとよいだろう。例えば、テーマファイルに直接変更を加えるのではなく、子テーマを作成する。
また、コンピューターにWordPressをインストールして、テーマについて練習することもできます。
それでは、初心者のためのWordPressテーマ・チートシートをご覧ください。
WordPressテーマの基本テンプレート
WordPressテーマは、テンプレートと呼ばれる様々なファイルで構成されている。WordPressテーマはすべてスタイルシートとインデックスファイルを持っている必要がありますが、通常は他にもたくさんのファイルを持っています。
以下は、すべてのテーマが持っている基本的なファイルのリストです：
- style.css
- header.php
- index.php
- サイドバー.php
- フッターphp
- 個別.php
- ページ.php
- コメントする.php
- 404.php
- ファンクション.php
- アーカイブ.php
- 検索フォーム.php
- 検索.php
独自のテーマを作成する場合は、WordPressスターターテーマから始めることができます。これらのテーマには、すぐに使えるWordPressテンプレートファイルとCSSが付属しており、これをベースに構築するためのフレームワークを提供します。
ヘッダー内のテンプレートタグ
WordPressには、テーマ全体にさまざまなものを出力するのに使える便利な関数がたくさん用意されています。これらの関数はテンプレートタグと呼ばれます。
まず、標準準拠のWordPressテーマすべてに必要な、おそらく最も重要な関数はwp_headと呼ばれるもので、次のようになります：
<?php wp_head(); ?>
このコードは、WordPressがウェブサイトの各ページの<head>セクションに追加する必要がある重要なHTMLをすべて取得します。また、多くのWordPressプラグインがあなたのサイトで正しく動作するためにも不可欠です。
以下は、テーマのheader.phpファイルでよく使用されるテンプレートタグのリストです。しかし、必要であればテーマの他の場所でも使うことができます。
[cbk2］
他のテーマファイルで使用されているテンプレートタグ
それでは、その他のよく使われるテンプレートタグとその役割を見てみましょう。
以下のテンプレートタグは、他のテンプレートを呼び出してインクルードするために使用されます。例えば、テーマのindex.phpファイルはヘッダー、フッター、コンテンツ、コメント、サイドバーテンプレートをインクルードするために使用します。
[cbk3］
以下のテンプレートタグはWordPressのループ内で、投稿のコンテンツ、抜粋、メタ情報を表示するために使用されます。
[cbk4］
WordPressテーマには、サイドバーと呼ばれるウィジェット対応エリアが用意されています。これは、ユーザーがWordPressウィジェットをドラッグ＆ドロップできるテーマファイル内の場所です。テーマには、ユーザーがウィジェットを追加できる場所が複数あることがよくあります。
しかし、ほとんどの場合、これらのウィジェットエリアは、テーマレイアウトの右または左サイドバーに配置されています。さらに詳しく知りたい方は、WordPressテーマに動的ウィジェット対応サイドバーを追加する方法のガイドをご覧ください。
以下は、テーマにサイドバーを表示するためのコードです。
[cbk5］
sidebar-1を、特定のウィジェット対応エリアまたはサイドバーのためにあなたのテーマによって定義された名前で置き換える必要があります。
ナビゲーションメニューを表示するテンプレートタグ
WordPressには強力なメニュー管理システムがあり、ユーザーはサイトにナビゲーションメニューを作成することができます。WordPressテーマは、複数のナビゲーションメニューの場所を持つことができます。
WordPressテーマでカスタマイザーナビゲーションメニューを作成する方法については、こちらのガイドをご覧ください。
以下は、ナビゲーションメニューを表示するためにテーマで使用されるコードです。
[cbk6］
テーマの場所は、ナビゲーションメニューを登録するために使用したテーマの名前に依存します。CSSコンテナ・クラスは好きな名前でかまいません。ナビゲーション・メニューを囲むので、それに応じてスタイルを設定することができます。
その他のテンプレートタグ
以下はWordPressテーマでよく使われるタグです。
[cbk7］
WordPressテーマにおける条件分岐タグ
条件分岐タグは、TrueかFalseで結果を返す関数です。これらの条件分岐タグは、テーマやプラグイン全体で使用することができ、特定の条件が満たされたかどうかを確認し、それに応じて何かを行います。
例えば、現在の投稿にアイキャッチ画像があるかどうか。アイキャッチ画像がない場合は、代わりに初期設定のアイキャッチ画像を表示することができます。
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' )
. '/images/thumbnail-default.jpg" />';
}
?>
他にもいくつか条件分岐タグがあります。
[cbk9］
他にも使える条件分岐タグはたくさんあります。条件分岐タグの全リストはWordPress codexの条件分岐タグのページにあります。
WordPressのループ
ループまたはWordPressループは、WordPressで投稿を取得して表示するために使用されるコードです。WordPressのテンプレートタグの多くは、投稿オブジェクトやpost_typeオブジェクトに関連付けられているため、ループ内でしか動作しません。
以下は簡単なWordPressループの例です。
<?php
// checks if there are any posts that match the query
if (have_posts()) :
// If there are posts matching the query then start the loop
while ( have_posts() ) : the_post();
// the code between the while loop will be repeated for each post
?>
<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p class="date-author">Posted: <?php the_date(); ?> by <?php the_author(); ?></p>
<?php the_content(); ?>
<p class="postmetadata">Filed in: <?php the_category(); ?> | Tagged: <?php the_tags(); ?> | <a href="<?php comments_link(); ?>" title="Leave a comment">Comments</a></p>
<?php
// Stop the loop when all posts are displayed
endwhile;
// If no posts were found
else :
?>
<p>Sorry no posts matched your criteria.</p>
<?php
endif;
?>
ループについてさらに詳しく知りたい方は、WordPressのループとは（インフォグラフィック）をご覧ください。
この投稿が、初心者のためのWordPressテーマの基本チートシートとしてお役に立てば幸いです。WordPressの関数ファイルに関する最も便利なトリックのリストもご覧ください。
この投稿が気に入ったなら、WordPressの動画チュートリアルをYouTubeチャンネルに登録してください。Twitterや Facebookでもご覧いただけます。
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Marco says
This is great article.
But is it still relevant in 2022 with Gutenberg block editor?
WPBeginner your the best!
WPBeginner Support says
What we share in this article is still currently relevant.
管理者
Henry Obilor says
I would love to ask when creating a new theme. Can I create my own header.php and use a premium theme footer.php?
Mixing yours with already built template. Will it work?
WPBeginner Support says
That would heavily depend on the content of the footer.php and how you have your theme coded. If you have the footer then the best method would be to test on a local installation.
管理者
Biplob says
It’s awesome thing. it’s very useful
Zaki says
This is certainly not for beginners. I am afraid I will end up with messing up my website. Coding part is completely unclear. I would appreciate if you can some great screenshots to illustrate “How to add a custom page”.
Sanam says
Bro where to paste that code in functions.php
WPBeginner Support says
At the bottom. If you have ?> tag as the last line then you need to paste code before that line.
管理者
Shahbaz Ahmed Bhatti says
Very Nice and Goooood Work Keep it up, Very goood information for Basic
Solomon says
Thanks very much, i really appreciate.
Pali Madra says
Thanks for the great tutorial. I recommend the tutorial to anyone trying to learn WordPress.
Keep up the good work!
Ben says
Thanks for a very helpful article. Just want I have been looking for.
Thanks.
Ben
madalinignisca says
what is – Site’s Description
I think it is
madalinignisca says
what is “<?php bloginfo(%u2019description%u2019); ?> – Site’s Description” ? I think it is “<?php bloginfo(‘description’); ?>”
mirzayasir4 says
That’s great useful cheet sheet when you are doing editing in themes. Thanks
John says
Fantastic, I’ve been looking for an easy WordPress cheatsheet for a while, thanks for doing this, makes life a lot easier and I can get a bit more creative. WordPress has such a lot of power under the hood.
mark says
this is gr8 for beginner
Russell Poulter says
This is SO bookmarked!
Thanks.
asif eminov says
Thanks this details.
Ersatzknochen says
Yeah, very useful. Thank you.
Delighted says
Thank you for the Codes in Header.php part, Very easy to understand and VERY useful! thank you for this.
SleepY says
Wow….thats what i was looking for since days.
thanks a lot !
Victor Duwon Jackson says
This is great, Thanks.
Manoj says
Great info! bookmarked
Obed Ward says
Excellent WP theme cheat sheet, going to bookmark it (and of course tweet it). Thanks!
Naeem Noor says
Very Useful, just printed it.
Blog2Life says
These shortcodes are just what I was looking for to start work on some new themes.. thanks for the post and keep up the good work!
Hami says
Yes exactly. This post has solved out and let us (beginners) start working instantly on new ideas
A.D.K. says
This is very useful thanks.
Jon Rawlins says
Retweeted this for you. Just about to get a blog setup for myself, so this site has been very useful.
Angad Sodhi says
Aah! Bookmarking this right away..
Referring the default theme for these small details is now history!
Thank you people.
DaveK says
Cool, Thanks for sharing, consider it tweeted