テーマを素早く変更したり、新しいカスタムテーマを作成したりするための WordPress テーマチートシートをお探しですか？ WordPress には、すぐに始められるように使用できる多くの組み込みテンプレートタグが付属しています。この記事では、初心者向けの WordPress テーマチートシートを共有します。
開始する前に
WordPress には強力なテンプレートエンジンが搭載されており、テーマ開発者は WordPress パワードのウェブサイトに美しいデザインを作成できます。ウェブサイトにインストールできる プレミアム WordPress テーマと無料 WordPress テーマ の両方があります。
各WordPressテーマには、多くのカスタマイズオプションが付属しています。これらのオプションを使用すると、色を変更したり、ヘッダー画像を追加したり、ナビゲーションメニューを設定したりできます。
ただし、テーマがサポートする機能にはまだ制限があります。テーマのWordPressテーマにわずかな変更を加えたいが、コーディングが必要になる場合があります。これを行うには、基本的なPHP、HTML、およびCSSを知る必要があります。
まず、WordPressが舞台裏でどのように機能するかとWordPressテーマのテンプレートに慣れることから始めたいでしょう。
その後、従うべきベストプラクティスがいくつかあります。たとえば、テーマファイルを直接変更するのではなく、子テーマを作成することです。
コンピューターに WordPress をインストールする ことで、テーマを練習することもできます。
それでは、初心者向けの WordPress テーマチートシートを見ていきましょう。
基本的なWordPressテーマテンプレート
各WordPressテーマは、テンプレートと呼ばれるさまざまなファイルで構成されています。すべてのWordPressテーマには、スタイルシートとインデックスファイルが必要ですが、通常は他の多くのファイルが付属しています。
すべてのテーマが持つ基本的なファイルのリストを以下に示します。
- style.css
- header.php
- index.php
- sidebar.php
- footer.php
- single.php
- page.php
- comments.php
- 404.php
- functions.php
- archive.php
- searchform.php
- search.php
独自のテーマを構築している場合は、WordPressスターターテーマのいずれかから始めることができます。これらのテーマには、すぐに使用できるWordPressテンプレートファイルとCSSが付属しており、構築の基盤となります。
ヘッダーのテンプレートタグ
WordPressには、テーマ全体でさまざまなものを出力するために使用できる便利な関数が多数用意されています。これらの関数はテンプレートタグと呼ばれます。
最初で、おそらくすべての標準準拠WordPressテーマで必要とされる最も重要な関数はwp_headと呼ばれ、次のようになります。
<?php wp_head(); ?>
このコードは、WordPress がウェブサイトのすべてのページの<head>セクションに追加する必要がある、すべての重要な HTML を取得します。また、多くの WordPress プラグインがウェブサイトで正常に機能するためにも不可欠です。
以下は、テーマの 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 -->
サイドバー-1を、その特定のウィジェット対応エリアまたはサイドバーに対してテーマによって定義された名前に置き換える必要があります。
ナビゲーションメニューを表示するためのテンプレートタグ
WordPressには、ユーザーがウェブサイトのナビゲーションメニューを作成できる強力なメニュー管理システムが付属しています。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@example.com', 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 の 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のfunctions.phpファイルで最も役立つトリックのリストもご覧ください。
この記事が気に入った場合は、WordPressのビデオチュートリアルをご覧ください。YouTubeチャンネルに登録してください。また、TwitterやFacebookでもフォローできます。
Mrteesurez
素晴らしい投稿です。実際、これはテンプレートタグを私にとって明確に説明し、使用法と機能に基づいて分類した投稿の1つです。
共有していただいた基本的なWordPressファイルも、自分でテーマを始めるのに役立ちます。カスタムテーマを編集または作成するには、これらのテンプレートタグと基本的なファイルを理解することが不可欠です。
ありがとうございます。このような投稿を楽しみにしています。
Fajri
良いチュートリアルです
PHPファイルの内容を編集する必要がある場合、特にテーマで提供されていないカスタマイズがある場合は、上記のPHPファイルの内容を編集する必要がある場合があります。
簡単なコード挿入には、WPCode Lite というプラグインが非常に役立ちます。
Mrteesurez
あなたに同意します。テーマでカバーされていない独自の要件のためにPHPファイルをカスタマイズする必要があることは、確かにあります。WPCodeは、これらの状況で私にとって救世主でした。テーマファイルを直接編集する手間なしに簡単なコード挿入を可能にし、カスタム調整の実装をより簡単かつ安全にします。非常に便利なので、ほぼすべてのウェブサイトで使用しています。
Marco
この記事は素晴らしいですね。
しかし、Gutenbergブロックエディターが導入された2022年現在でも、それはまだ関連性があるのでしょうか？
WPBeginner、あなたは最高です！
WPBeginnerサポート
この記事で共有した内容は、現在も関連性があります。
管理者
Fajri
やあ、兄弟
はい、その通りです。このチュートリアルは、ウェブサイトがブロックエディターまたはクラシックエディターを使用している場合でも、WordPressの現在のバージョンに引き続き関連しています。
試してみるべきだよ、友達
Henry Obilor
新しいテーマを作成する際に質問があります。独自の header.php を作成して、プレミアムテーマの footer.php を使用できますか？
既存のテンプレートと組み合わせて使用します。機能しますか？
WPBeginnerサポート
footer.php の内容と、テーマのコーディング方法によって大きく異なります。フッターがある場合は、ローカル環境でテストするのが最善の方法です。
管理者
Biplob
素晴らしいことです。非常に役立ちます。
Zaki
これは間違いなく初心者向けではありません。ウェブサイトを台無しにしてしまうのではないかと心配です。コーディング部分は全く不明瞭です。「カスタムページを追加する方法」を説明するために、いくつかの素晴らしいスクリーンショットを提供していただけると幸いです。
サナム
兄弟、functions.php のどこにそのコードを貼り付ければいいですか？
WPBeginnerサポート
一番下にあります。最後の行が ?> タグになっている場合は、その行の前にコードを貼り付ける必要があります。
管理者
Shahbaz Ahmed Bhatti
とても素晴らしく、素晴らしい仕事です。続けてください。初心者にとって非常に良い情報です。
ソロモン
本当にありがとうございます。感謝しています。
Pali Madra
素晴らしいチュートリアルをありがとうございます。WordPressを学ぼうとしているすべての人にこのチュートリアルをおすすめします。
良い仕事を続けてください！
ベン
非常に役立つ記事をありがとうございます。まさに探していたものです。
ありがとう。
ベン
madalinignisca
「サイトの説明」とは何ですか？
そうだと思います
madalinignisca
「<?php bloginfo(%u2019description%u2019); ?> – サイトの説明」とは何ですか？ 「<?php bloginfo(‘description’); ?>」だと思います。
mirzayasir4
テーマを編集する際に役立つ素晴らしいチートシートですね。ありがとうございます。
ジョン
素晴らしいです。しばらくの間、簡単な WordPress チートシートを探していました。これを作成してくれてありがとう。おかげでずっと楽になり、もう少し創造的になれます。WordPress は内部に多くのパワーを持っています。
mark
初心者にはこれが最適です
ラッセル・ポルター
これは SO ブックマークされました！
ありがとう。
asif eminov
この詳細情報に感謝します。
Ersatzknochen
はい、とても役立ちます。ありがとうございます。
嬉しい
Header.php のコード、ありがとうございます。非常に理解しやすく、非常に役立ちます！ありがとうございます。
SleepY
わぁ…数日間探していたものがこれでした。
本当にありがとうございます！
ビクター・デュウォン・ジャクソン
これは素晴らしいです、ありがとう。
Manoj
Great info! bookmarked
オベド・ウォード
素晴らしいWPテーマのチートシートですね。ブックマークします（もちろんツイートもします）。ありがとうございます！
Naeem Noor
とても役に立ちます。印刷しました。
Blog2Life
これらのショートコードは、新しいテーマの開発を始めるのにまさに求めていたものでした。投稿ありがとうございます。これからも頑張ってください！
Hami
Yes exactly. This post has solved out and let us (beginners) start working instantly on new ideas
A.D.K.
これは非常に役立ちます、ありがとう。
Jon Rawlins
あなたのためにリツイートしました。ちょうど自分でブログをセットアップするところなので、このサイトは非常に役立ちました。
Angad Sodhi
あー！すぐにブックマークします。
これらの細かい部分のデフォルトテーマを参照することは、もはや過去のことです！
皆さん、ありがとうございます。
DaveK
Cool, Thanks for sharing, consider it tweeted