ワードプレスが本当にわからない人に「PHPの使いどころ」をシンプルに解説します

アイキャッチ
SPONSORED LINK

 

こんにちは。カトヒサ(@hisayosky)です。

 

先日「『HTMLサイトをWordPressに移行する』とは? 最低限の知識だけシンプルに解説します」という記事を書きました。

ざっくりいうとHTMLで作ったサイトをワードプレスのテーマとして表示させる方法を書いた記事です。

今回はその続きです。

 

けん子
ワードプレスにPHPが関係しているのはわかったけれど、どこでどんなふうに使ったらいいの?

という疑問に答えます。

というのも、ぼく自身がこのレベルでわからなかったからです。

 

リトルカトー
PHPタグってものがあるみたいだけど、どこでどうやって使うんだー!

そもそも PHPかけないし、こんなんでワードプレスやって大丈夫???

とパニックになったんですね。

なのでこのレベルから説明を始めます。わかる方はすっ飛ばしてくださいね。

 

いきなり結論ですが、PHPの使いどころは2つあります。

  • ファイルを呼び出す
  • 画像やテキストなどのコンテンツを呼び出す

 

主な機能としてはこれだけです。

実際の使い方はHTMLサイトのワードプレステーマ化の手順に沿って解説していきます。

HTMLサイトをワードプレスで表示させる方法は前回の記事に書いてありますので、わからない方はそちらを見てください。

 

今回は「ワードプレスにおける PHPの使いどころと使い方」です。

ではいってみましょう。

 

SPONSORED LINK

PHPを使う上で知っておきたい前提条件

具体的な手順の前に3点だけ押さえておいてください。

①PHPには基本の書き方がある

<?php  ・・・・・(); ?>

はじめが「<?php」、最後は「(); ?>」というのが基本ルールです。

最後の「()」には何か入ることがあります。

 

② PHPはHTMLの中に書く

正確にはHTMLを元に作ったPHPファイルに書くのですが、感じとしてはHTMLの中に<?php 〜(); ?>というPHPタグがところどころ入り込んでるイメージです。

 

③ PHPはCSSの中には書かない

いじるのは「.php」のついたPHPファイル、つまり元HTMLファイルのみです。CSSはノータッチです。

 

PHPは「額縁」と「絵」をイメージする

PHPの機能は「呼び出すこと」だと言いました。これを「額縁」と「絵」を使って説明します。

 

額に入った猿の絵

額縁に絵が入っているだけだと、いつ見ても同じ絵しか表示されません。

 

額縁の中にPHP

しかし絵の代わりに「投稿された最新の絵を表示する」というPHPの命令が額縁の中にあったとしたらどうでしょう。

 

最新投稿を表示

絵が新しく投稿されるたびに額縁の中身は変わっていきますね。

PHPがファイルやコンテンツを呼び出すのはこんなイメージです。

では PHPを使った具体的なワードプレス化の手順を見ていきましょう。

 

PHPの使いどころ1「ファイルを呼び出す」

index.phpをバラバラにする

php化前

「index.html」を「index.php」にしてワードプレステーマとして表示させたのが上の画像です。

これをワードプレステーマとしてより使いやすくしていきます。

 

まずは「index.php」をバラバラに分割してしまいます(バラバラにしても大丈夫な訳は後ほど説明します)。

 

phpファイル分割の仕方

上の画像で色がついている部分を元の「index.php」から切り離して、「header.php」「sidebar.php」「footer.php」を作っていきます。

たとえば「header.php」なら

headerの場所

index.phpの一番上からヘッダーの終わりまでのコード(画像の赤い部分)をバッサリと切り取りまして、

 

header.phpファイル

新たに作った「header.php」というファイルにペーストして保存します。これでheader.phpができました。

 

その他ファイルのコードの場所

同様にindex.phpからサイドバーに該当する部分とフッターに該当する部分を切り出しまして、

 

sidebar.php

新しく作った「sidebar.php」「footer.php」ファイルにそれぞれペーストして保存します。

 

これでindex.phpがバラバラにできたわけですが、このままではファイルは機能しません。

試しにテーマを表示させてみると、

php化前

さっきはこうだったものが、

 

つなげる前のファイル

こうなっています。

ヘッダー、サイドバー、フッターがなくなり、CSSも適用されていません。切り取ってしまったわけですから当然ですね。

これを元の形に戻すために、バラバラにしたファイルをPHPでつなぎ合わせていきます。

 

バラバラになったPHPファイルをつなぎ合わせる

まず「header.php」を「index.php」につなげてみましょう。

やり方は簡単で、index.phpの頭に

<?php get_header(); ?>

というPHPタグをつけるだけです。

get_headerを貼る場所

こんな感じですね。これでテーマの表示を確認すると、

 

headerだけついた状態

ヘッダーがついてますね。「header.php」にはCSSを読み込む文も含まれていますので、CSSもちゃんと反映されています。

 

こんな感じでサイドバーとフッターもつなげていきます。

サイドバーとフッターをつなげるためのPHPタグはそれぞれ

<?php get_sidebar(); ?>

<?php get_footer(); ?>

です。

これを元のコードを切り取った場所に貼り付けます。

phpタグ貼ったところ

こんな感じですね。index.phpの一番下です。

これでテーマの表示を確認してみると、

php化前サイドバーとフッターがついて元どおりになっています。

これですべてのファイルがつながりました。

 

ワードプレスのメニューバーを表示させる

最後にワードプレスのメニューバーを表示させます。

メニューバー

黒い部分ですね。これがないと管理画面に戻れなくて不便です。

表示させるには2つのPHPタグを使います。

<?php wp_head(); ?>

<?php wp_footer(); ?>

 

貼る場所はそれぞれ決まっています。

<?php wp_head(); ?> はheader.phpの</head>の直前に貼ります。

wp_head貼る場所

 

<?php wp_footer(); ?> はfooter.phpの</body>直前に貼ります。

footerを貼る位置

これでメニューバーが表示されます。

 

PHPの使いどころ2「コンテンツを呼び出す」

コンテンツにもいろいろありますが、ここではカテゴリーを例に説明します。

php化前

いまカテゴリーには「item」が4つ表示されています。これはHTMLに直接書いたテキストです。

一方でワードプレスの管理画面で「カテゴリー」を見てみると、

カテゴリー

「イベント開催情報」など4つのカテゴリーが登録されています(これはぼくが事前に登録したものです)。

 

管理画面で登録したカテゴリーを呼び出してサイトで表示できれば便利ですよね?

これができれば管理画面からカテゴリーが自由に変えられます。

 

そこでPHPを使います。今回使うのは、

<?php wp_list_categories(‘orderby=ID&title_li=’); ?>

というPHPタグです。

これは「カテゴリーの一覧をリスト形式で取得する」という意味の命令です。

 

問題はこのタグを貼る場所ですが、

タグの場所

sidebar.phpのこちらの箇所に貼ります。

 

貼った後

HTMLで書かれていたところがPHPに置き換わりました。

これでテーマの表示を確認すると、

カテゴリー反映されている

登録されたカテゴリーが反映されています。これで管理画面からカテゴリーが自由に変えられるようになりました。

 

こんな感じで管理画面で入力される情報とサイトにおける表示場所をPHPで結んでいくとワードプレス化ができるというわけです。

まあすべてがこんなに簡単にできるわけではありませんが、イメージとしてはこれでよかろうと思います。

 

補足情報その1「ファイル名について」

「index.php」「header.php」などいくつかのファイルが出てきました。

これらのファイル名は適当につけたのではありません。ワードプレスであらかじめ決められた名前を使っています。

ワードプレスにおいてはファイル名によって表示される優先順位が決まっているからです。

「どこにどんなファイル名が使われるのか」「優先順位がどうなっているのか」はWordPress Codexで調べられますが、はじめはわけがわからないことでしょう(ぼくはそうでした)。

外部記事に説明が親切なものがありましたのでリンクを貼っておきます。

🔶外部記事
テンプレート階層の基本とテーマのカスタマイズ

 

とにかく「ファイル名は決まったものを使う」とだけ覚えておいてください。

 

補足情報その2「テンプレートタグについて」

<?php get_header(); ?> や <?php wp_head(); ?> などいくつかのPHPタグが出てきました。

これもワードプレスではじめから決まっているものです。

「これがやりたいときにはこのコードを使ってね」というのがあらかじめ用意されているのです。

PHPの文法をもとに自分で考えてコードを書くこともあるのですが、基本的には用意されたタグ、すなわちテンプレートタグを利用して命令を書いていくものと考えてください。

ワードプレスの PHPは「考えるよりググれ」です。

 

まとめ:ワードプレスにおいてPHPは情報を呼び出す。命令はワードプレスによってあらかじめ用意されたものを応用して使っていく

ワードプレスのPHPは

  • ファイルを呼び出す
  • コンテンツを呼び出す
  • 命令があらかじめ用意されている
  • ファイル名もあらかじめ用意されている

 

▼最後まで読んでくれたあなたにおすすめの記事
【WordPressテーマの作り方】PHP苦手なぼくでも理解できた勉強法を紹介します




当サイトは「STORK」を使用しています

関連記事



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です