Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

初心者のためのWordPressテーマチートシート

WordPressテーマのチートシートを使って、手持ちのテーマを素早く変更したり、新しいカスタマイザーを作成したりしたいですか?WordPressには多くのビルトイン・テンプレートタグが用意されており、それらを使って最初の一歩を踏み出すことができます。この投稿では、初心者向けのWordPressテーマ・チートシートを紹介します。

WordPress theme development cheat sheet for beginners

始める前に

WordPressには強力なテンプレートエンジンが搭載されており、テーマ開発者はWordPressを利用したサイトの美しいデザインを作成することができます。あなたのサイトにインストールできるWordPressテーマには、プレミアムと無料のものがあります。

各WordPressテーマには、数多くのカスタマイズオプションが用意されています。これらのオプションを使用すると、色を変更したり、ヘッダー画像を追加したり、ナビゲーションメニューを設定したりすることができます。

しかし、テーマがサポートする機能は限られています。時には、WordPressテーマに若干の変更を加えたいと思うかもしれませんが、それにはコーディングが必須です。そのためには、基本的なPHP、HTML、CSSの知識が必要です。

まず最初に、WordPressが舞台裏でどのように動いているのか、そしてWordPressのテーマ・テンプレートに慣れることだ。

その後、いくつかのベストプラクティスに従うとよいだろう。例えば、テーマファイルに直接変更を加えるのではなく、子テーマを作成する。

また、コンピューターにWordPressをインストールして、テーマについて練習することもできます。

それでは、初心者のためのWordPressテーマ・チートシートをご覧ください。

WordPressテーマの基本テンプレート

Basic WordPress theme files

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]

他のテーマファイルで使用されているテンプレートタグ

それでは、その他のよく使われるテンプレートタグとその役割を見てみましょう。

Template tags that include other templates

以下のテンプレートタグは、他のテンプレートを呼び出してインクルードするために使用されます。例えば、テーマの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でもご覧いただけます。

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

33件のコメント返信を残す

  1. Syed Balkhi

    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!

  2. Marco

    This is great article.
    But is it still relevant in 2022 with Gutenberg block editor?

    WPBeginner your the best!

    • WPBeginner Support

      What we share in this article is still currently relevant.

      管理者

  3. Henry Obilor

    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

      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.

      管理者

  4. Biplob

    It’s awesome thing. it’s very useful

  5. Zaki

    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”.

  6. Sanam

    Bro where to paste that code in functions.php

    • WPBeginner Support

      At the bottom. If you have ?> tag as the last line then you need to paste code before that line.

      管理者

  7. Shahbaz Ahmed Bhatti

    Very Nice and Goooood Work Keep it up, Very goood information for Basic

  8. Solomon

    Thanks very much, i really appreciate.

  9. Pali Madra

    Thanks for the great tutorial. I recommend the tutorial to anyone trying to learn WordPress.

    Keep up the good work!

  10. Ben

    Thanks for a very helpful article. Just want I have been looking for.

    Thanks.

    Ben

  11. madalinignisca

    what is – Site’s Description

    I think it is

  12. madalinignisca

    what is “<?php bloginfo(%u2019description%u2019); ?> – Site’s Description” ? I think it is “<?php bloginfo(‘description’); ?>”

  13. mirzayasir4

    That’s great useful cheet sheet when you are doing editing in themes. Thanks

  14. John

    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.

  15. mark

    this is gr8 for beginner

  16. Delighted

    Thank you for the Codes in Header.php part, Very easy to understand and VERY useful! thank you for this.

  17. SleepY

    Wow….thats what i was looking for since days.

    thanks a lot !

  18. Obed Ward

    Excellent WP theme cheat sheet, going to bookmark it (and of course tweet it). Thanks!

  19. Blog2Life

    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

      Yes exactly. This post has solved out and let us (beginners) start working instantly on new ideas :D

  20. Jon Rawlins

    Retweeted this for you. Just about to get a blog setup for myself, so this site has been very useful.

  21. Angad Sodhi

    Aah! Bookmarking this right away..
    Referring the default theme for these small details is now history!
    Thank you people.

  22. DaveK

    Cool, Thanks for sharing, consider it tweeted ;-)

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。