ベストセラー人気 WordPress テーマTop 30 詳細

WordPress ページの分析

Last Updated:2020年1月16日| 16のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

はじめ

この記事は、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コードをブラウザ(クライアント)に送信します。

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

What will happen when someone views your WordPress 投稿

WordPress ページの分析

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

Twenty Sixteen Theme in WordPress - WordPress ページの構造

上の図を見ると、ページが次のように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の ファイルを変更します。

第二部である部分は少し複雑に見えるのですが、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)を呼び出します。

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

Twenty Sixteen Theme in WordPress with php 2

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

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

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

注 - 文とページの違い

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

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

メモ:



16のコメント

コメント

  1. ポートフォリオのためのホームページを作成しています。
    WordPressの基本的な概念の説明を探していたこのブログに願った情報があり、非常に嬉しいです。 説明も映像もとてもよく理解されます。
    今後、このサイトに頻繁に訪問する予定です。
    ありがとうございます。

    応答
    • こんにちは、euny様。 ブログ記事が役に立ちましたことを願って。 質問がある場合は、文や任意の文章にコメントをつけて頂ければ分かる範囲内でお答えします。

      応答
    • ありがとうございます、県様。

      役に立ちましたことを願って。

      Elementorのようなページビルダーを使用している場合、テーマファイルを直接変更する必要性が多く削減されています。 それでも基本的な動作を理解するのに役立ちます。

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

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

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

    応答
  3. と。ここでは本当にすごいホームページと思います。 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を設置したがあまり好きではない削除しました。 再利用してみると思ったよりもいいですね。