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

テーマをすばやく変更したり、新しいカスタムテーマを作成したりするための WordPress テーマのチートシートをお探しですか? WordPress には、有利なスタートを切るために使用できる多くの組み込みテンプレートタグが付属しています。この記事では、初心者向けのWordPressテーマのチートシートを共有します。

始める前に

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

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

ただし、テーマがサポートする機能には依然として制限があります。場合によっては、WordPress テーマにコーディングを必要とするわずかな変更を加えたい場合があります。そのためには、基本的な PHP、HTML、CSS について知っている必要があります。

まず最初に行うべきことは、WordPress が舞台裏でどのように動作するのか、そして WordPress テーマテンプレートを理解することです。

その後、従うべきベストプラクティスがいくつかあります。たとえば、テーマファイルに直接変更を加えるのではなく、子テーマを作成します。

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

そうは言っても、初心者向けの WordPress テーマのチートシートを詳しく見ていきましょう。

基本的な WordPress テーマテンプレート

各 WordPress テーマは、テンプレートと呼ばれるさまざまなファイルで構成されています。すべての WordPress テーマにはスタイルシートとインデックスファイルが必要ですが、通常は他にも多くのファイルが必要になります。

以下は、各テーマに含まれる基本ファイルのリストです。

スタイル.css
header.php
インデックス.php
サイドバー.php
フッター.php
シングル.php
ページ.php
コメント.php
404.php
関数.php
アーカイブ.php
検索フォーム.php
検索.php

独自のテーマを構築している場合は、WordPress スターターテーマの 1 つから始めることができます。これらのテーマには、すぐに使用できる WordPress テンプレートファイルと、構築するためのフレームワークを提供する CSS が付属しています。

ヘッダー内のテンプレートタグ

WordPress には、テーマ全体でさまざまなものを出力するために使用できる便利な機能が多数付属しています。これらの機能はテンプレートタグと呼ばれます。

まず、標準に準拠したすべての WordPress テーマに必要なおそらく最も重要な関数は wp_head と呼ばれ、次のようになります。

<?php wp_head(); ?>

このコードは、WordPress が Web サイト上のすべてのページの <head> セクションに追加する必要があるすべての重要な HTML を取得します。また、多くの WordPress プラグインが Web サイトで適切に動作するためにも不可欠です。

以下は、テーマの header.php ファイルでよく見つけて使用されるテンプレートタグのリストです。ただし、必要に応じてテーマの他の場所でも使用できます。

// Title of the Blog, or Blog Name
<?php bloginfo('name'); ?> 

// Title of a Specific Page
<?php wp_title(); ?>

// Exact URL for the site
<?php bloginfo('url'); ?> 

// Site's Description
<?php bloginfo('description'); ?> 

// Location of Site’s Theme File
<?php bloginfo('template_url'); ?>

// Link to the Style.css location
<?php bloginfo('stylesheet_url'); ?>  

// RSS Feed URL for the site
<?php bloginfo('rss2_url'); ?> 

// Pingback URL for the site
<?php bloginfo('pingback_url'); ?>

// WordPress version number 
<?php bloginfo('version'); ?>

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

次に、その他の一般的に使用されるテンプレートタグとその機能を見てみましょう。

次のテンプレートタグは、他のテンプレートを呼び出してインクルードするために使用されます。たとえば、テーマのindex.phpファイルは、これらを使用してヘッダー、フッター、コンテンツ、コメント、サイドバーのテンプレートを含めます。

//Displays Header.php file content
<?php get_header(); ?> 

// Displays Footer.php file content
<?php get_footer(); ?>

// Displays Sidebar.php file content
<?php get_sidebar(); ?>

// Displays Comment.php file content
<?php comments_template(); ?>

次のテンプレートタグは、投稿のコンテンツ、抜粋、メタデータを表示するために WordPress ループ内で使用されます。

// Displays the Content of the Post
<?php the_content(); ?>  

// Displays the excerpt that is used in Posts
<?php the_excerpt(); ?>

// Title of the Specific Post
<?php the_title(); ?>

// Link of the Specific Post
<?php the_permalink() ?>

// Category of a Specific Post
<?php the_category(', ') ?>

// Author of the Specific Post
<?php the_author(); ?> 

//ID of a Specific Post
<?php the_ID(); ?>

// Edit link for a Post 
// Oonly visible to logged in users with editing privileges
<?php edit_post_link(); ?>

// URL of the next page
<?php next_post_link(' %link ') ?>

// URL of the previous page
<?php previous_post_link('%link') ?>

WordPress テーマには、サイドバーと呼ばれるウィジェット対応領域が付属しています。これらは、ユーザーが WordPress ウィジェットをドラッグアンドドロップできるテーマファイル内の場所です。多くの場合、テーマにはユーザーがウィジェットを追加できる複数の場所があります。

ただし、ほとんどの場合、これらのウィジェット領域はテーマレイアウトの右または左のサイドバーに配置されます。詳細については、WordPress テーマに動的ウィジェット対応サイドバーを追加する方法に関するガイドを参照してください。

テーマにサイドバーを表示するために使用されるコードは次のとおりです。

<?php 
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
	return;
}
?>

<aside id="secondary" class="widget-area" role="complementary">
	<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->

Sidebar-1 を、特定のウィジェット対応領域またはサイドバーのテーマで定義された名前に置き換える必要があります。

ナビゲーションメニューを表示するためのテンプレートタグ

WordPress には、ユーザーが Web サイトのナビゲーションメニューを作成できる強力なメニュー管理システムが付属しています。 WordPress テーマには、複数のナビゲーションメニューの場所を含めることができます。

WordPress テーマで独自のカスタムナビゲーションメニューを作成する方法については、ガイドをご覧ください。

以下は、テーマでナビゲーションメニューを表示するために使用されるコードです。

<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

テーマの場所は、ナビゲーションメニューの登録に使用したテーマの名前によって異なります。 CSS コンテナクラスは任意の名前で呼び出すことができます。ナビゲーションメニューを囲むので、それに応じてスタイルを設定できます。

その他のテンプレートタグ

以下は、WordPress テーマ全体で一般的に使用されるタグの一部です。


// Displays the date current post was written
<?php echo get_the_date(); ?> 

// Displays the last time a post was modified
get_the_modified_time

// Displays the last modified time for a post
<?php echo the_modified_time('F d, Y'); ?>

// Displays post thumbnail or featured image
<?php the_post_thumbnail( ); ?>

// Displays monthly archives
<?php wp_get_archives( ); ?>

// Displays the list of categories
<?php wp_list_categories(); ?>

// Displays the gravatar of a user from email address
// 32 pixels is the size, you can change that if you need
<?php echo get_avatar( '[email ', 32 ); ?>

// Displays gravatar of the current post's author
<?php echo get_avatar( get_the_author_meta( 'ID' ), 32 ); ?>

WordPress テーマのコンディショナルタグ

条件付きタグは、結果を True または False で返す関数です。これらの条件付きタグは、テーマまたはプラグイン全体で使用して、特定の条件が満たされているかどうかを確認し、それに応じて処理を行うことができます。

たとえば、現在の投稿に注目の画像があるかどうかなどです。アイキャッチ画像がない場合は、代わりにデフォルトのアイキャッチ画像を表示できます。

<?php
if ( has_post_thumbnail() ) {
    the_post_thumbnail();
}
else {
    echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) 
        . '/images/thumbnail-default.jpg" />';
}
?>

以下に、使用できる条件付きタグをいくつか示します。

// Checks if a single post is being displayed
is_single() 

// Checks if a page is being displayed
is_page() 

// Checks if the main blog page is displayed
is_home() 

// Checks if a static front page is displayed
is_front_page() 

// Checks if current viewer is logged in
is_user_logged_in()

使用できる条件タグは他にもたくさんあります。コンディショナルタグの完全なリストは、コンディショナルタグに関する WordPress コーデックスページにあります。

WordPress ループ

ループまたは WordPress ループは、WordPress で投稿を取得して表示するために使用されるコードです。多くの WordPress テンプレートタグは、post または 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 でもご覧いただけます。