ウェブサイト検索

究極のWordPressチートシート

WordPress は、まだ有名ではないにしても、急速に有名になりつつあります。この穏やかな美しさはどこにでもあり、世界がこれまでに見た中で最高の Web サイトや Web アプリの一部を支えています。これは、信じられないほど多用途であるだけでなく、学習と使用が驚くほど簡単な、プレミア CMS およびブログ プラットフォームです。 WordPress の人気が日に日に高まるのはなぜでしょうか?

ただし、WordPress をセットアップして起動するときに表面に表示されるものは、舞台裏で起こっていることのほんの一部にすぎません。実際、私たち皆が大好きな美しい UI も、舞台裏での喧騒に比べたら大したことはありません。つまり、WordPress は、PHP と MySQL として知られる 2 つのやや複雑な Web テクノロジー上で実行されます。

役割を果たす他のテクノロジーには、JavaScript や、jQuery、CSS、HTML などがあります。 WordPress テーマ (およびプラグインも) は主に PHP で書かれており、実行には MySQL データベースに依存します。また、前述の Web テクノロジーにも依存します。これらすべてのテクノロジーが連携して機能する必要があります。

初心者の皆さんは、WordPress プラットフォーム、テーマ、プラグインが連携して動作するために、開発者が標準化されたコード (総称して PHP タグと呼ばれる) のセットを使用することを理解できないかもしれません。今日の投稿ではこれらのコードの概要を説明し、それらがどのように役立つかを示します。適切な手段として、ここのどこかにいくつかの例を詰め込みますので、テーマ構築の旅を楽しく進める準備をしてください。

テーマの分析

WordPress テーマは、単に複数の PHP ファイルがリンクされたものにすぎません。テーマ（およびサイト）の外観を決定する CSS スタイルシート ファイルが付属しています。基本に戻りますが、WordPress テーマは単なるいくつかの PHP ファイルです。上は、WordPress テーマの構造を説明する優れた tuts+ チートシートのスナップショットです。 WordPress テーマを作成するには、次のファイルが必要です。

  • header.php – このテンプレート ファイルには、<head> セクション内と開始 <body> タグの前に表示されるヘッダー情報が含まれています。ここでは、メタデータ、サイト タイトル、CSS スタイルシートへのリンクなどを追加します。
  • index.php – これは WordPress テーマ (またはサイト) の本体テンプレートです。その唯一の目的は、テンプレート タグを使用して他のファイルをインクルードすることによって、他のファイルをまとめることです (テンプレート タグについては後ほど詳しく説明します)。
  • sidebar.php – これはサイドバー セクションです。ウィジェット、カテゴリ、追加メニュー、検索フォームなど、好きなものを配置できます
  • footer.php – これはフッター セクションです。著作権情報、RSS リンク、ウィジェット、リンク、ソーシャル アイコンなどを追加します。
  • page.php – WordPress ベースのサイトでページを作成するときは常に、これが責任のあるテンプレートです
  • single.php – このテンプレート ファイルには単一のブログ投稿が含まれます
  • comments.php – コメントを担当するテンプレート
  • 404.php – 読者が悪名高い 404 not found エラーに遭遇したときに表示されるテンプレート
  • search.php – 読者に WordPress サイト上のコンテンツを見つける機会を提供します
  • searchform.php – 上記の機能を提供するには検索フォームが必要ですよね。
  • archive.php – 2008 年に公開したコンテンツを見つけるのは難しくないはずだから
  • functions.php – すべての特別な関数、さらにはカスタム プラグインをここに配置します。ただし、テーマ間の互換性を確保するには、カスタム コードをスタンドアロン プラグインとして追加することをお勧めします。追加のメニューを追加したり、ウィジェットをアクティブにしたり、その他にもさまざまなことができます。このファイルは、WordPress サイト/テーマを思い通りに変えるための大きな力を与えてくれます。
  • style.css – これは PHP テンプレート ファイルそのものではありません。ただし、見た目を制御するために CSS スタイルを追加するファイルです。 WordPress テーマの情報ヘッダーも付属しています。

間違いなく、より少ないテンプレートでテーマを構築できますが、それを習慣化することはお勧めしません。結局のところ、標準の WP テーマを作成するには、上記の 10 個ほどのファイルが必要なだけです。 13 歳って大した数字じゃないですよね？簡単に言うと、index.php は次のようになります。

<?php
// Every page will need the contents of the header.php
get_header(); ?>

// Insert main content here, include the loop

<?php
// Include your sidebar
get_sidebar(); ?>

<?php
// The footer hook is used by themes and plugins to load scripts and tracking codes
get_footer(); ?>

次に、ループと呼ばれる気の利いたコード スニペットについて説明します。

ザ・ループ

人気の WordPress チュートリアル: HTML から WordPress テーマを作成する方法など、これまでの投稿シリーズのいくつかでは、ついでにではありますが、ループについて言及しました。では、なぜこのループが人気のスニペットになっているのでしょうか?この特別なコードがなければ、各投稿と抜粋を WordPress テーマに手動でコーディングする必要があります。新しい記事を投稿するたびにこれを行うことになります。

無駄な努力と時間を費やすと、体は青くなり、硬直してしまいます。死ぬほど悔しい思いをした後に残る二酸化炭素の痕跡は、オゾン層にヤンキーススタジアム 12 個分ほどの穴を開けることになるでしょう。まあ、私は事実を誇張しすぎていますが（または事実が不足しています）、WordPress サイトにすべての投稿を手動でコーディングしていたら、大騒ぎするでしょう。

ループは命の恩人です。次のコード スニペットを WordPress テンプレート ファイルの任意の場所に挿入するだけで、これまでに作成したすべての投稿が一覧表示されます。

<?php
if ( have_posts() ) :

	while ( have_posts() ) :

		the_post();

		// Post Content here

	endwhile;

endif; ?>

通常、index.php のループを使用して投稿のリストを表示しますが、自由に試してみてください。投稿をリストしたい場所に追加します。さらに、ループ内にカスタム HTML タグと PHP タグを追加して、必要に応じて投稿をカスタマイズします。タグと言えば、WordPress では何が利用できるのでしょうか?

タグを含める

テンプレート インクルード タグは、WordPress テーマ フォルダーから他のテンプレート ファイルをインクルード (または呼び出し) するためにテンプレート ファイルで使用する単なる PHP コードです。私たちが話している内容は次のとおりです。

  • <?php get_header(); ?> – これをindex.phpで使用して、header.phpファイルを呼び出します(またはインクルードします)。 header.php を取得し、その内容をindex.php に表示します。これがファイルをインクルードするということです。
  • <?php get_sidebar(); ?> – sidebar.php が含まれます
  • <?php get_footer(); ?> – footer.php テンプレート ファイルが含まれます
  • <?php comments_template(); ?> – 簡単なクイズ: この include タグの役割は何だと思いますか?

テンプレートのブログ情報タグ

テンプレート タグの別のカテゴリがあり、単に bloginfo タグと呼びます。これらは 1 つの役割を果たし、それはデータベースから WordPress サイトに関する情報を取得することです。これは主に、ユーザー プロフィールと設定 -> 一般を介して管理領域の WordPress サイトにフィードする情報です。 データベースから情報が取得されると、これらのタグは配置したものと同じものをサイトに表示します。

bloginfo の構造を少し変更すると、取得した情報を表示するだけでなく、PHP コード内の別の場所でその情報 (情報) を使用できるようになります。なんて都合のいい？それについては後ほど詳しく説明します。最も一般的な bloginfo タグは次のとおりです。

  • <?php bloginfo(‘name’); ?> – WordPress ブログ/サイトのタイトルが表示されます。
  • <?php bloginfo('url'); ?> – このテンプレート タグにはブログの URL が表示されます
  • <?php bloginfo('description'); ?> – ブログの説明、つまりキャッチフレーズが表示されます。
  • <?php bloginfo(‘charset’); ?> – サイトのエンコードに使用される文字セットを表示します。デフォルトはUTF-8です
  • <?php bloginfo(‘stylesheet_url’); ?> – アクティブなテーマの CSS スタイルシートへの URL が表示されます。
  • <?php bloginfo(‘version’); ?> – 使用している WordPress のバージョンを表示します。
  • <?php bloginfo(‘言語’); ?> – WordPress の言語を表示します。
  • <?php bloginfo('rss_url'); ?> – RSS 0.92 フィードの URL を表示します。
  • <?php bloginfo('rss2_url'); ?> –RSS 2.0 フィードの URL を表示します。

WordPress テーマを強化するために使用できる bloginfo タグが他にもいくつかあります。さて、数秒前に話した bloginfo の小さな変更についてです。これまでは、<?php bloginfo(); を使用してきました。 ?>。 これを次のように変更しましょう。 <?php $bloginfo=get_bloginfo ($show, $filter); ?>。パラメーターを詳しく見てみましょう。

  • $show – これは、データベースから取得する情報に名前を付けるために使用するキーワードです。例には、「名前」、「URL」、「説明」、「admin_email」などが含まれます。
  • $filter – これにより、取得した情報をフィルタリングできるようになります。デフォルトでは、「raw」に設定されています。これは、$show の値がそのまま返されることを意味します。これを「display」に設定すると、$show の値が最初に wptexturize() 関数を介して渡されます。ただし、現時点では心配しないでください。

例を次に示します。「最高のプレミアム WordPress テーマ」のようなキャッチフレーズ (サイトの説明) を取得して表示したいとします。まず、このタグを使用してこの情報を取得します。

<?php $site_description = get_bloginfo( 'description' ); ?>

…サイトの説明を$site_description に読み込みます。 サイトにサイトの説明を表示するには、これを使用します。

<?php echo 'Your tagline is: '. esc_html( $site_description ); ?>

これにより、あなたのキャッチフレーズは次のようになります: 最高のプレミアム WordPress テーマ

注: WordPress サイトでさらに多くのことを実現できる、他にも多くの種類のテンプレート タグがあります。これらは、一般タグ、作成者タグ、投稿サムネイル タグ、カテゴリ タグ、リンク タグなどのさまざまなセットに分類されます。ループ内で使用することもできるので、ぜひ楽しんでください。

テーマのスタイルシート

style.css については前に説明しました。繰り返しになりますが、style.css ファイルがなぜ重要なのでしょうか?まず、テーマに関する詳細が提供されます。この情報はスタイルシート ヘッダーに入力され、管理領域での選択時にテーマを識別するのに役立ちます。したがって、2 つのテーマのスタイルシート ヘッダーに同じ詳細が含まれていてはなりません。スタイルシート ヘッダーの例を次に示します。

/*
Theme Name: Your Theme Name
Theme URI: https://www.yoursite.com/yourtheme
Author: Your Name
Author URI: https://www.yoursite.com/
Description: This WordPress theme is 100% responsive blah blah...
Version: 1.0
License: GNU General Public License V2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: gold, one-column, left-sidebar, responsive-grid, etc
Text Domain: yourthemename
*/

この情報は、style.css の最初 (または一番上) にあります。それ以外に、次のことを確認してください。

  • CSSコーディング標準に従う
  • 有効な CSS を使用する
  • CSSを最小限に抑える
  • 印刷に適したスタイルを追加する
  • すべての HTML 要素のスタイルを設定する

最終的な考え

このチートシートは、WordPress テーマの開発を学習する際に役立つ簡単なリソースです。ここで共有したタグとスニペットを使用すると、標準テーマを迅速に開発し、汗をかかずに拡張できます。もちろん、WordPress テーマの開発を学び続ける必要があります。そのためには、信頼できるリソースの中でも特に WordPress Codex、tuts+、Threehouse、および ThemeShaper をお勧めします。

それ以外にも、ヒント、裏技、スニペット、その他思いついたことを以下のコメント欄でお気軽に共有してください。 WordPress についてどこで、どのように学んだのか知りたいと思っています。またね！