WordPressのget_template_part()関数について知っておくべきことすべて

公開: 2020-10-22

私はかつて、プログラミングを学ぶ最良の方法は、他の人が書いたコードを読むことだと読んだことがあります。 結局のところ、開発者として費やす時間のほとんどは、おそらく、あなたや他の開発者が過去に書いたコードをレビュー、磨き、修正することでしょう。 これがまさに私がフリーでオープンソースのソフトウェアがとても好きな理由です。それは私たちに素晴らしいツールのソースコードへのアクセスを与え、それらから学ぶことを可能にします。

あなたがWordPressの世界に興味があるなら(そしてあなたがここにいるのであなたはそうだと思います)、WordPress CoreのソースコードまたはGutenbergは、より良いWordPressプロフェッショナルになり、バックエンドとフロントエンドの開発について学ぶための2つの非常に良い方法です。

グーテンベルクの最初のリリース以来、これまでにフロントエンド開発について学んだことをすべて共有してきました。 したがって、たとえば、Reactの基本を教え、コンポーネントを再利用する方法を確認し、Gutenbergを拡張する方法を説明し、JavaScriptニュースについて話し合って、より良いソースコードを記述し、いくつかの記事を挙げました。私たちは書いた。

さて、今日はギアをシフトし、WordPressコアに再び焦点を当てます。 なんで? 数日前に発表された次の二十二十一のテーマの発表がそうするための完璧な言い訳であるためか、私にはわかりません。 それでは、WordPressでテーマを作成するときに最も重要な要素の1つであるget_template_part関数について説明しましょう。

パンダは自分のコンピューターに何が表示されるかを恐れています
心配しないでください! ゆっくりやりましょう。

WordPressテーマ

まず、WordPressのテーマがどのように機能するかを確認しましょう。 基本的に、テーマは、サイトで使用するHTML構造とCSSスタイルを定義するファイルのコレクションです。

Webページのスケルトンについて考えると、同じパターンが常に繰り返されていることがわかります。

  • まず、 htmlタグとheadタグを開きます。 ここに、スクリプト、スタイル、メタタグなどを追加します。
  • 次に、 headタグを閉じ、 bodyタグを開きます。これには、Webサイトの表示コンテンツが含まれます。
    • 通常、ページの本文には、Webのロゴやメニューなどのヘッダーが含まれます。
    • 次に、コンテンツ自体が表示されます。これには、ページ、ブログ記事、投稿のリスト、検索結果などがあります。
    • 最後に、通常はフッターで終わります。
  • 最後に、ページ全体がレンダリングされたら、すべてのタグを閉じて完了です。

つまり、すべてのWebページは多かれ少なかれ同様の構造に従っているようです。共通の部分(ヘッダー、メニュー、フッターなど)とコンテンツ固有の領域(ブログ投稿、検索後に得られた一連の結果)があります。 、WooCommerce製品など)。

プログラマーはコードを繰り返すのが好きではなく、私たちは(一般的に)組織化された人々であるため、WordPressのテーマは非常にパターン化されたファイル構造に従います。 数か月前に書いたこの投稿では、テーマ内のさまざまなファイルについて適切な説明がありますが、次の点に注意してください。

  • スタイルシート: style.css
  • Webページを「開く」ためのheader.phpファイル(つまり、 headタグと、通常はすべてのページに共通するbodyの最初の部分を出力します)、
  • ページを「閉じる」(つまり、フッターを追加してhtmlタグを閉じる)別のfooter.phpファイル、および
  • レンダリングしたいさまざまなタイプのコンテンツ用の追加ファイルがたくさんあります。

get_template_part関数とは何ですか?その目的は何ですか?

新しい機能に出くわしたときに最初に行うことは、父親が新しいルンバクリーナーのプログラミングを手伝ってくれるように頼んだときとは逆です。ドキュメントを読んでください。 それでは、コーデックスを見て、関数でそれを実行しましょう。

get_template_partは、子テーマがテーマ内のコードの再利用可能なセクションをオーバーロードするための単純なメカニズムを提供します。

テーマの名前付きテンプレートパーツが含まれます。名前が指定されている場合は、特殊なパーツが含まれます。 テーマに{slug}.phpファイルが含まれていない場合、テンプレートは含まれません。

テンプレートはrequire_onceではなくrequireを使用して含まれているため、同じテンプレートパーツを複数回含めることができます。

$ nameパラメーターの場合、ファイルの名前が「{slug} -special.php」の場合は、「special」を指定します。

注:get_template_part()はサイレントに失敗します

WordPress.orgのget_template_partドキュメント

見る? 1分もかからずに、必要なすべての情報を入手できました。 これで、この関数を使用してテーマに「再利用可能なパーツ」を作成し(したがって、コードの重複を回避)、子テーマがそれらを適応できるようにすることがわかりました。 また、そのパラメーター、内部動作(PHPのrequire関数を使用)、およびそれから期待できること(「サイレントに失敗する」)に関する情報もあります。

幸せな男の漫画

残念ながら、これらの{slug}.phpファイルや{slug}-special.phpファイルなど、まだ不明な点がいくつかあります。 彼らは何ですか? それらには何が含まれていますか? 彼らは何をしますか? ドキュメントだけを見て答えるのが難しい質問がたくさんあるので、例にジャンプする時が来ました。

テーマで部分的なテンプレートを作成する方法

Twenty Twenty-Oneテーマを見て、これらの「部分テンプレート」が使用されているかどうか、使用されている場合はどのように見えるか、独自のテーマに実装するために何をすべきかを確認しましょう。

WordPressテーマのファイル階層に関する私の投稿を読むと、「 index.phpがテーマのデフォルトのテンプレートであることがわかります。 コンテンツに特定のテンプレートが設計されていない限り、当社のWebサイト上のコンテンツをレンダリングするために使用されます。」 これはデフォルトのテンプレートなので、そこから始めるのは良い考えだと思います。 これは、TwentyTwenty-Oneテーマのindex.phpのコンテンツです。

 get_header(); if ( have_posts() ) { // Load posts loop. while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content/content' ); } // Previous/next page navigation. twenty_twenty_one_the_posts_navigation(); } else { // If no content, include the "No posts found" template. get_template_part( 'template-parts/content/content-none' ); } get_footer();

ご覧のとおり、以前にコメントしたすべての部分があります。

  • get_headerを使用したヘッダーが含まれます。
  • コンテンツ自体をレンダリングします。
  • get_footerでページを閉じます。

ここで興味深いのは、明らかに、 index.phpの「コンテンツ」領域です。 具体的には、有効なコンテンツが表示されているかどうかを知るための小さなコントロールがあり(WordPressループのhave_posts関数)、表示されているかどうかに応じて、部分的なテンプレート( …/content )をロードします。別の( …/content-none )。

ここで部分的なcontent.phpテンプレートを見ると、大まかに次のことがわかります。

 <article <?php post_class(); ?>> <header class="entry-header alignwide"> … the_title( … ); … </header> <div class="entry-content"> <?php the_content( … ); wp_link_pages( … ); ?> </div> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer> … </article>

かなり簡単ですね。 私たちが持っているのは、ブログ投稿などの一般的なWordPressコンテンツをレンダリングするために設計された小さなテンプレートだけです。 結果のHTMLスケルトンは、タイトル、そのコンテンツ、およびフッターを含むarticleタグにすぎず、すべてWordPressテンプレートタグを使用して実際のコンテンツをプルすることに注意してください。

WordPressAPIが素晴らしい理由

これらすべての関数( get_headerget_footer 、または今日のスター: get_template_part )が存在することを知らなかったとしても、同様のアプローチに従ってコードを整理したと確信しています。 結局のところ、ヘッダー用、フッター用、コンテンツ用のテンプレートを作成してから、特別なファイルなどを作成して、すべてを接着するのは非常に理にかなっているようです。

このようなアプローチに従った場合、 index.phpファイルは次のようになります。

 require_once 'header.php'; if ( have_posts() ) { // Load posts loop. while ( have_posts() ) { the_post(); require 'template-parts/content.php'; } // Previous/next page navigation. twenty_twenty_one_the_posts_navigation(); } else { // If no content, include the "No posts found" template. require 'template-parts/content-none.php'; } require_once 'footer.php';

これは、TwentyTwenty-Oneテーマにあるものと非常によく似ています。 それで、この時点で、あなたはあなた自身に尋ねるかもしれません:私は特定のWordPress関数を使うことによって何を得るのですか? PHPのrequireを直接使用することは同じではありませんか?特に、WordPressのドキュメントによると、これらのヘルパー関数が使用するのはまさにそれであると考えてください。

さて、主な理由は実際にはドキュメント自体に記載されています:それは子テーマを簡単に作成できるようにします。 したがって、子テーマを作成していてget_template_partを使用している場合、WordPressは子内のテンプレートを検索し、そうでない場合は親のテンプレートを使用します。

しかし、それだけではありません! WordPressの機能は通常、最終結果を適応させるためのフィルターとアクションでいっぱいです。 たとえば、 wp-includes/general-template.phpファイルの内部関数get_template_partを見ると次のようになります。

 function get_template_part( … ) { do_action( "get_template_part_{$slug}", … ); … do_action( 'get_template_part', … ); if ( ! locate_template( … ) ) { return false; } }

プラグインとテーマ自体が活用できるアクションがいくつかあることがわかります。 そして、スレッドを引っ張り続けると、WordPressがどのようにロケート( locate_template )し、最終的に使用するテンプレートをロードするかを確認することもできます。

 function locate_template( $template_names, … ) { $located = ''; foreach ( $template_names as $name ) { if ( file_exists( STYLESHEETPATH . "/$name" ) ) { $located = …; // in child theme break; } else if ( file_exists( STYLESHEETPATH . "/$name" ) ) { $located = …; // in parent theme break; } else { … } } if ( $located ) { load_template( $located, $require_once, $args ); } return $located; }

今日の投稿が、WordPressテーマの仕組みをもう少しよく理解するのに役立つことを願っています。 また、WordPressのドキュメントを読んだり、ソースコードを閲覧したりして、WordPressについて学ぶ方法を示してくれることを願っています。 そして、あなたがそれを好きなら、それをあなたの友人と共有して、私たちにコメントを残してください。

UnsplashのJoshuaSortinoによる注目の画像。