WordPress初心者がカスタマイズを始めるためのPHP基礎知識〜準備編〜

2019.03.26  /  2019.06.29 WordPress・PHP
WordPress初心者がカスタマイズを始めるためのPHP基礎知識〜準備編〜

こんにちは。
PHPを知ることでWordPressが好きになった藤ミヤチです。

WordPressの初心者がつまずくのは、

困っている受講生
カスタマイズしようと思ってソースを見たけど、HTML・CSS・JavaScript/jQuery以外のものが入り乱れててよくわからない……

ということではないでしょうか。

私は実際に、そこで盛大につまづきました。
そしてめちゃくちゃWordPressが嫌いになりました。

藤ミヤチ藤ミヤチ
やりたいことができん!何してるのかわからなさすぎる!

でも、PHPの基本を抑えたらWordPressのカスタマイズがどんどんできるようになって、WordPressが好きになったんです。

今はWordPressが好きです。
カスタマイズしてて楽しい。

そこで、私がWordPressを好きになるために必要だった知識を、初心者でもわかりやすいようにまとめました。
みんな、自由にWordPressを使いこなせるようになろう。

WordPressはPHPを利用して動くシステム

WordPressとは

オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している。

https://ja.wikipedia.org/wiki/WordPress

つまり、PHPを利用して動き、誰でもソースを見てカスタマイズできるブログのシステム。データの保存・管理にはMySQLを使っている、ということ。

たとえば、WordPressをインストールしたときにデフォルトで入っている無料テーマ「Twenty Nineteen」のソースは↓

<header id="masthead" class="<?php echo is_singular() && twentynineteen_can_show_post_thumbnail() ? 'site-header featured-image' : 'site-header'; ?>">

  <div class="site-branding-container">
    <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
  </div><!-- .layout-wrap -->

  <?php if ( is_singular() && twentynineteen_can_show_post_thumbnail() ) : ?>
    <div class="site-featured-image">
      <?php twentynineteen_post_thumbnail(); ?>
      <?php the_post(); ?>
      <?php $discussion = ! is_page() && twentynineteen_can_show_post_thumbnail() ? twentynineteen_get_discussion_data() : null; ?>
      <div class="<?php echo ( ! empty( $discussion ) && count( $discussion->responses ) > 0 ) ? 'entry-header has-discussion' : 'entry-header'; ?>">
        <?php get_template_part( 'template-parts/header/entry', 'header' ); ?>
      </div><!-- .entry-header -->
      <?php rewind_posts(); ?>
    </div>
  <?php endif; ?>
</header><!-- #masthead -->

ヘッダー部分のHTMLソースですが、見慣れないコードがたくさん入り込んでいると思います。

このソースの中で、<?php ….. ?> で囲われているところがPHPです。

WordPressを動かすためのPHPって何者?

わからない受講生
じゃあ、PHPってなんなん?

そもそもPHPって何者でしょうか。

ざっくり説明すると「HTMLと相性がいい、サーバーサイドの言語」です。

PHPはHTMLと相性がいい

PHPはHTMLと混ぜて記述することができます。

<div class="site-branding-container">
  <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
</div><!-- .layout-wrap -->

つまり、HTMLと相性がいいので、ウェブサイトを作るときに一つのファイルにまとめて管理・編集することもできるんです。

藤ミヤチ藤ミヤチ
PHPはウェブサイトを作るプログラムとして使いやすい!

PHPはサーバーサイドの言語

ウェブサイトを含め、ウェブサービスを構成する言語は、

  1. サーバーサイドの言語
  2. クライアントサイドの言語

にざっくり分けることができます。

これは「プログラムがどのタイミングで実行されるのか」で区分する方法です。

クライエントサイド言語、サーバーサイド言語の関係性

WordPressのウェブサイトが表示されるときは、おおまかに

  1. ユーザーがブラウザでURLを入力
  2. ブラウザがサーバーに情報を取りに行く
  3. サーバーでPHPが動いて情報をセッティング
  4. サーバーがブラウザに情報を渡す
  5. ブラウザがHTML, CSS, JavaScriptを読み込む
  6. ページが表示される

という流れになっています。

つまり、HTML, CSS, JavaScriptとPHPでは動くタイミング(場所)が違います。

サーバーで動く言語(PHPなど)をサーバーサイドの言語、ブラウザで読み込まれる言語(HTML, CSS, JavaScriptなど)をクライアントサイドの言語、といいます。

藤ミヤチ藤ミヤチ
PHPは、HTML・CSS・JavaScript/jQueryよりも先に実行されるよ

そのため、WordPress上にあるテーマファイル(サーバーに保存され、サーバーが動くときに読み込まれるファイル)をみると、PHPが含まれています。

<header id="masthead" class="<?php echo is_singular() && twentynineteen_can_show_post_thumbnail() ? 'site-header featured-image' : 'site-header'; ?>">

  <div class="site-branding-container">
    <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
  </div><!-- .layout-wrap -->

  <?php if ( is_singular() && twentynineteen_can_show_post_thumbnail() ) : ?>
    <div class="site-featured-image">
      <?php twentynineteen_post_thumbnail(); ?>
      <?php the_post(); ?>
      <?php $discussion = ! is_page() && twentynineteen_can_show_post_thumbnail() ? twentynineteen_get_discussion_data() : null; ?>
      <div class="<?php echo ( ! empty( $discussion ) && count( $discussion->responses ) > 0 ) ? 'entry-header has-discussion' : 'entry-header'; ?>">
        <?php get_template_part( 'template-parts/header/entry', 'header' ); ?>
      </div><!-- .entry-header -->
      <?php rewind_posts(); ?>
    </div>
  <?php endif; ?>
</header><!-- #masthead -->

しかし、ブラウザで読み込まれているソースを見ると、PHPが消えています。
※ウェブページ内で右クリック→「ソースを表示」とすると、ブラウザが読み込んでいるソースを直接確認できます。

<header id="masthead" class="site-header">
  <div class="site-branding-container">
    <div class="site-branding">
      <h1 class="site-title"><a href="http://localhost/i-smile/" rel="home">サイトタイトル</a></h1>
      <p class="site-description">
        Just another WordPress site
      </p>
    </div><!-- .site-branding -->
  </div><!-- .layout-wrap -->
</header><!-- #masthead -->

PHPが実行され、整理され、HTMLのみになっています。
かなりスッキリしていますね。

藤ミヤチ藤ミヤチ
まずPHPがサーバーで実行されるよ

WordPressでPHPはどんな役割をしているのか?

WordPressにおいて、PHPはいろんな仕事をしています。
その仕事をおおきく分けると2つあります。

  1. 条件に応じてHTMLを出し分ける
  2. データベースとの情報のやり取りを仲介する

条件に応じてHTMLを出し分ける

ウェブサイトを作っていくと、

藤ミヤチ藤ミヤチ
記事の一覧ページで、次のページがあれば「次へ」のボタンを出したい。次のページがなければ、ボタンはいらないな…

という場面がたくさんあると思います。

つまり、「ある条件を満たしたら何かを表示、満たさなければ非表示(もしくは違うものを表示する)」といったケースです。

こういったときに、HTMLやCSSしか使えないと、

  • 次のページが存在する場合
  • 次のページが存在しない場合

を別々に作成する必要があります。

・・・面倒じゃない?

この場合、「次へ」のボタンが「必要か、必要ないか」だけの違いなのに、別々にページ作るの、面倒・・・

だから、PHPが頑張ってくれるんです。
「今回は次のページが存在するから、ボタンを表示するね!」って。

たとえば、記事の一覧ページのファイルで、ページャー部分のHTMLを書くときに下記のようにしておきます。

<ul class="pager">
<li><a href="https://www.text.com/page/1/">1</a></li>
<li><a href="https://www.text.com/page/2/">2</a></li>
<li><a href="https://www.text.com/page/3/">3</a></li>
<?php if($next_page): ?><!--次のページが存在したら次のコードを出力して-->
<li class="next"><a href="xxxxx">次へ</a></li>
<?php endif; ?><!--出力するコードはここまで-->
</ul>

※PHPの書き方までは、現時点でわからなくても大丈夫です。

↑上記の設定をしておくと、PHPがサーバーで実行され、ブラウザで読み込まれる段階には下記のどちらかになっています。

【次のページが存在する場合】

<ul class="pager">
<li><a href="https://www.text.com/page/1/">1</a></li>
<li><a href="https://www.text.com/page/2/">2</a></li>
<li><a href="https://www.text.com/page/3/">3</a></li>
<li class="next"><a href="xxxxx">次へ</a></li>
</ul>

【次のページが存在しない場合】

<ul class="pager">
<li><a href="https://www.text.com/page/1/">1</a></li>
<li><a href="https://www.text.com/page/2/">2</a></li>
<li><a href="https://www.text.com/page/3/">3</a></li>
</ul>
藤ミヤチ藤ミヤチ
PHPで条件を指定しておくと、コードの出し分けができるから、無駄にたくさんページテンプレートを作る必要がないよ

データベースとの情報のやりとりを仲介する

WordPressにおけるPHPの主な役割として、もう一つ「データベースとの情報のやりとりを仲介する」というものがあります。

たとえば、管理画面で新しい記事を作成して保存したときの流れはこうなります。

ブラウザ・サーバー・データベースの関係性。HTML, CSS, JavaScriptと、PHPが動くタイミングを図解
  1. ユーザーが記事投稿フォームに入力
  2. PHPが入力した情報を受け取り、データーベースに渡す
  3. データベースで保存する
  4. 保存がおわったことをPHPが確認
  5. PHPが投稿完了した後のページのHTML, CSSなどを準備
  6. ブラウザがHTML, CSS, JavaScriptを読み込む

という流れになります。

藤ミヤチ藤ミヤチ
PHPがデータベースとのやり取りを橋渡ししてくれるよ

WordPressのカスタマイズをするには、まずPHPの基本をおさえよう

WordPressはPHPを使って動くシステムです。

PHPとは

  • HTMLと相性がいいサーバーサイドの言語
  • WordPressでは主に「HTMLの出しわけ」と「データベースとの仲介」を担当している言語

です。つまり、

  • PHPがHTMLの出し分けをするときの条件を変更すれば、ページに表示するものをコントロールできる
  • PHPがデータベースから取ってくる情報を調整してあげれば、ページに表示する情報(記事の内容など)を増やしたり、減らしたり、違うものにできる

PHPの基本的な役割を知れば、WordPressのカスタマイズができそうな気がしてきませんか?

困っている受講生
でも最初からPHPを勉強する必要があるなら、大変そう・・・

大丈夫。

PHPの基本的な書き方・考え方だけ覚えればWordPressのテーマで書かれていることがだいたい分かるようになりますし、簡単なカスタマイズがささっとできるようになります。

藤ミヤチ藤ミヤチ
次からは、PHPの基本的な書き方・考え方を紹介していくね!
スキルアップしたいサイト制作者
向けの情報をつぶやくよ 藤ミヤチのTwitter
(ここをクリック/タップ)



LINE@で特別レクチャーなどの情報を発信中!
友だち追加

シェア


この記事も参考になるかも
【WordPress】新しいブロックエディター Gutenbergのススメ〜正式リリースから半年経ったからこそ言えること〜
【完全初心者向け】WordPress(ワードプレス)の始め方・SEO対策をまとめて片付けるための方法をわかりやすく解説
WordPressのテーマ開発に詳しくなりたいサイト制作者が抑えておくべき、定番のプラグイン19選