WordPress ページの分析

はじめ

この記事は、PHPの全く知識がないユーザーが WordPressについて理解できるように WordPress ページがどのように構成されているかに焦点を置く予定です。

PHPに精通しておられ WordPressに慣れている方は、この記事を読む必要がありません。 そして以下の内容は、理解だけで進み、されます。 あえて詳細を知る必要はなく、理解がされていない部分があっても越えて行った時間が少し過ぎた後に再び見れば理解がいただけるでしょう。

WordPressのブログのページリクエスト構造

以前いくつかの文を使用して WordPressは、PHPベースのという点を介して WordPressがどのように動作するかを説明しようとしましたが、単に説明だけでは理解することが容易ではない部分があるようです。 まず、このブログの前の記事で説明した部分をしばらく言及した後、具体的な WordPress ページの例を示します。

WordPressは、PHPベースのされています。 ブラウザに表示されるHTMLは、PHPをサーバーから解釈して、ブラウザに表示したものです。 PHP言語が分からない場合、このような部分を快く理解するのが難しい部分があるようです。 次のビデオを介して何がPHPでサーバとクライアントの関係を理解し​​ていただければ助かります。

訪問者が WordPress サイトを訪問して、コンテンツを要求するプロセスを簡単にまとめてみると次のとおりです。

1. 訪問者のブラウザ（例：Internet Explorer、Google Chromeは、オペラ、Firefoxなど）は、Webページを要求します。
2. WordPress コアで必要なPHPスクリプトを呼び出します。
3. WordPress コアは、DB（データベース）と通信してデータ（文/ページなど）を取得します。
4. 次に、現在アクティブなプラグインやテーマからデータを取得して結合して、動的にHTMLコードを生成します。
5. 動的に生成されたHTMLコードをブラウザ（クライアント）に送信します。

このプロセスを図で示してみると：

WordPress ページの分析

今 WordPress ページが具体的にどのように構成されているかどうか WordPress デフォルトのテーマであるTwenty Sixteenの page.php ファイルを見てみましょう。 次は、Twenty Sixteenのサンプルページがブラウザに表示されることをキャプチャしたものです。

上の図を見ると、ページが次のようにXNUMXつの部分で構成されています。

1. 헤더
2. コンテンツ部分
3. サイドバー
4. フッター

別途説明をしなくても大変ご理解いただけると思います。 上に表示される図は、「サンプルページ」という「ページ」タイプのコンテンツを表示したものです。 （ページと記事の違いについては、この記事の一番下を参照してください。）

上の図に示されている「サンプルページ」は「ページ」タイプで、レイアウトは page.php ファイルに指定されています。 このファイルのソースを見てみると次のとおりです（前のコメント削除され）：

<?php get_header(); ?>

<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
// Start the loop.
while ( have_posts() ) : the_post();

// Include the page content template.
get_template_part( 'template-parts/content', 'page' );

// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}

// End of the loop.
endwhile;
?>

</main><!-- .site-main -->

<?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

おそらく、上記のソースを見て吐き気が私の方にもおられるしれません。 上記のコードは、理解する必要が現時点ではありません。 上記の単純なコードがどのように、上記のサンプルのページのようなレイアウトを表示したいですか？

上の図で四つの部分に分けましたが、 WordPressは、各部分を関数で処理して呼び出します。 つまり、

1. ヘッダ部分を呼び出します。
2. 部分はコンテンツ部分を呼び出します。
3. サイドバーを呼び出します。
4. はフッター部分を呼び出します。

まず部分について、しばらく説明すると、このPHPコードはget_header（）関数を呼び出すのに、get_header（）関数については、 WordPress マニュアルで確認することができます。 簡単に説明するとget_header（）は header.phpのを表示します（PHPではincludeという用語を使用します）。

少し複雑なようです、 部分は header.phpの ファイルの内容に置き換えると考えてください。 したがって、ヘッダ部分を修正するには、  header.phpの ファイルを変更します。

XNUMX番目の部分部分は少し複雑に見えますが、 template-parts/content-page.php ファイルを読み込むと理解できます。 （詳しくはあえて理解する必要はありませんが、ご希望の場合 この記事を参照してください。） content-page.php ファイルの内容を見ると、次のとおりです。

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><!-- .entry-header -->

<?php twentysixteen_post_thumbnail(); ?>

<div class="entry-content">
<?php
the_content();

wp_link_pages( array(
'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
'after'       => '</div>',
'link_before' => '<span>',
'link_after'  => '</span>',
'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
'separator'   => '<span class="screen-reader-text">, </span>',
) );
?>
</div><!-- .entry-content -->

<?php
edit_post_link(
sprintf(
/* translators: %s: Name of current post */
__( 'Edit<span class="screen-reader-text"> "%s"</span>', 'twentysixteen' ),
get_the_title()
),
'<footer class="entry-footer"><span class="edit-link">',
'</span></footer><!-- .entry-footer -->'
);
?>

</article>

上記のように、少し複雑ですが、この程度なら比較的単純なコードになっています。 この部分は、ページの本文のレイアウトを表示するものと理解すれば良いです。 ソースから the_title( ' '、' ') 関数の部分は、ページのタイトルを、 コンテンツ（） 関数の部分が本文の内容を表示します（参照）。 加えて、wp_link_pages（）関数とedit_post_link（）関数が含まれています。

残りともと同様に理解すれば良いです。 get_sidebar（）は、文字通り サイドバーのテンプレート（sidebar.php）を呼び出し、get_footer（）は フッターテンプレート（footer.php）を呼び出します。

図のマッチングさせてみると、以下のように理解することができます。

参考までに部分は少し複雑になっていますが、テーマによって少しずつ異なります。 例えば、 WordPress テーマの中で最も人気を集めて AVADA テーマの100％Widthテンプレートでは、 になっています（実際にはもう少し複雑ですが、理解を助けるために簡略化したものです）。

page.php ファイルでどのように各構成要素をincludeさせてページテンプレートを構成していること大まかに見てみました。 前述したようヘッダ部分を修正するには、page.phpでロードするヘッダファイルを変更します。

※ WordPress テーマファイルを直接変更する必要がある場合は、チャイルドテーマを作成して作業してください。 有料テーマでは、チャイルドテーマのインストールファイルが提供されることがよくあります。 そうでなければ」子 Theme Configuratorプラグインを使用して簡単に WordPress チャイルドテーマを作成する「記事を参照してチャイルドテーマを作成できます。チャイルドテーマを作成せずに作業すると、今後のテーマの更新時に修正内容が消えます。

注 - 記事とページの違い

• 文（Post）には、日付とタイムスタンプが表示されますページ（Page）はそうではありません。
• 文は、ウェブサイトには通常、新しい記事が最初に表示されて後方に行くほど古い記事が表示されます。
• ページは、ブログに含まれていません。
• 文は、カテゴリとタグを使用して整理できます。
• ページは階層で構成が可能です。
• 記事はRSSフィードに登録（Syndicate）されて、新しい文が発行されると、購読者に通知がされます。
• ページはカスタムテンプレートを使用することができます。

詳しくは「WordPress ポスト（文）とページの違い「を参考にしてください。

メモ：

• 基本的な WordPress 사용법
• フロントエンドとバックエンドの比較