WordPress ページの分析

はじめ

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

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

ワードプレスのブログのページリクエスト構造

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

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

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

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

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

What will happen when someone views your WordPress 投稿

ワードプレスのページの分析

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

Twenty Sixteen Theme in WordPress - ワードプレスのページの構造

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

  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(); ?>

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

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

  1. <?php get_header(); ?>はヘッダ部分を呼び出します。
  2. <?php get_template_part( 'template-parts / content'、 'page'); ?>の部分は、コンテンツ部分をもたらします。
  3. <?php get_sidebar(); ?>は、サイドバーを呼び出します。
  4. <?php get_footer(); ?>はフッター部分を呼び出します。

まず<?php get_header(); ?>の部分についてしばらく説明すると、このPHPコードはget_header()関数を呼び出すのに、get_header()関数については、 ワードプレスガイドで確認することができます。 簡単に説明するとget_header()は header.phpのを表示します(PHPではincludeという用語を使用します)。

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

第二部である<?php get_template_part( 'template-parts / content'、 'page'); ?>の部分は、少し複雑に見えるのですが、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( '<h1 class = "entry-title"> "、" </ h1>') 関数の部分は、ページのタイトルを、 コンテンツ() 関数の部分が本文の内容を表示します(参考)。 加えて、wp_link_pages()関数とedit_post_link()関数が含まれています。

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

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

Twenty Sixteen Theme in WordPress with php 2

参考までに<?php get_template_part( 'template-parts / content'、 'page'); ?>の部分は、少し複雑になっているが、テーマに沿って少しずつ異なります。 たとえば、ワードプレスのテーマの中で最も人気を集めて AVADAテーマの100%Widthテンプレートでは、 <?php the_content(); ?>になっています(実際にはもう少し複雑ですが、理解を助けるために簡略化したものです)。

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

※ワードプレスのテーマファイルを直接編集する場合は、必ずチャイルドテーマを作って作業してください。 有料テーマでは、チャイルドテーマのインストールファイルが提供されている場合があります。 そうでない場合は、「Child Theme Configuratorプラグインを使用して簡単にワードプレスチャイルドテーマを作成する"文を参照してチャイルドテーマを作成することができます。チャイルドテーマを作成せずに作業すると、今後のテーマを更新時に修正が消えます。

注 - 文とページの違い

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

詳細については、「ワードプレスポスト(文)とページの違い"を参照してください。

注:


12のコメント

    • 多く不足文を読んでいただきありがとうございます。

      最初は、この文をシリーズで考えていました。
      しかし、この記事を作成してみると、時間圧迫がひどすぎますね。〓〓

      返信
  1. 文上げシヌラ手間が多いでした。
    勉強熱心にするべきと考えています。
    ありがとうございます。^^

    返信
  2. と。ここでは本当にすごいホームページと思います。 WordPress ブログでは、最強のようなのですが。 笑本文にプログラムのソース部分と、黒い背景に、ソースコード表現は、どのようなつもりですか? WordPress プラグインを使用したのでしょうか?

    返信
    • こんにちは、ブログを訪問していただきありがとうございます^^
      Simple Code Highlighterというプラグインです。 https://wordpress.org/plugins/simple-code-highlighter/

      返信
      • ありがとうございます。 ^^
        http://choding.com/ WordPress ブログを運営しているよ。 訪問者は、おそらく一人もいないところであるが、第ホームページもお知らせが礼儀みたい残します。
        今後も多くの助けて学ぶよ。 ありがとうございます〜

      • 多くの文が上がってきていますね。
        コメントシステムをdisqusに一度変えてみません? これにより、ユーザーがより簡単にコメントを付けることができ、... SEOにも役立つでしょう。 私は最近、disqusに変えたところ、思ったよりいいですね。 https://www.thewordcracker.com/basic/disqus/ 参考ください。

      • さらに質問ドリルがいますよ。 上知らせてくださったプラグインを適用したら良いのに.. ^^; 改行がないされ、ソースコードがずっと出てくる現象があります。 約cssファイルにwordwrap属性? 検索し入れブワトヌンデド同様と助けちょっとリクエストします。 もしかしたら、どこを手見解決できますか?
        問題のある記事へのリンク例: http://choding.com/2016/02/17/005025/

      • 改行は、手動で調整していただければされます。 https://www.thewordcracker.com/miscellaneous/long-url-wrap-css/ 文を参照してみてください。

        そして、上記のプラグインの役割は、ソースコードをそのまま見えるようにすることです。

      • はい、たくさんdisqusをかぶっ WordPress 基本コメントより良く見える長います。 一度リンク接続、接続しても訪問流入がより多くなると思います。
        ところで、モバイル(携帯電話)で見たときにアップ。その記事のdisqusコメントのみ見えるのではなく、その下に(WordCrackerさんのブログを例にとると) "wordcrackerの他のコメント」のリストも出てきて。その下また「最新コメント "とも出てきてないのに..
        私はその部分が私とはならない合うんですよ。 クリック可能なリンクが多く乗って乗って通うことができる可能性が多くなったりしますが、その対応する文とは関係のない部分が多く見られるという点が。

        まあそうです。 現在までだから基本 WordPress コメントを書いています。 また、基本的な WordPress コメントも、名前、電子メール、ホームページのようなものはない書いてもコメントが可能ですから。 ^^

      • こんにちは?

        下の「〜の他のコメント「リストは、設定から削除が可能です。
        設定>一般でDiscoveryオプションのチェックを外してくれればされます。(笑)

        心地よいものを使用すると良いから...私も以前は、disqusを設置したがあまり好きではない削除しました。 再利用してみると思ったよりもいいですね。

コメントを残す