見出し画像
Photo by akiyohox

#100 WordPressを学びなおす

em

今までなんとなく作っていたので、本を買って学び直そうと思います。
ちょくちょく更新する予定


1. 環境設定

  • サブドメインを作る

  • サイト設定する　SSLとかPHPのバージョンとか

  • DBを作る　DB名とか文字コードとか

  • サイト設定に戻って、WordPressをインストールする　＞　DB情報いれる　＞WPのログイン情報を設定する

最新WPは6.5.3　最新PHPは8.3.7　2024年6月現在
WordPressはMySQLに投稿記事やユーザー情報を保存するシステム　なので
WPをインストールする前に、DBとユーザーを作成しておく。

主なWPのファイルやディレクトリ

  • index.php 最初に読まれるファイル

  • wp-activate.php　ユーザーのアカウントに関するファイル

  • wp-admin/　管理画面に関するディレクトリ

  • wp-content/　テーマやプラグインに関するディレクトリ

  • wp-includes/　WPのシステム全般に関するディレクトリ

2. サイトの基本情報を設定する

設定　＞　一般　で
サイトのタイトル（サイト名）
キャッチフレーズ（サイトの説明）を入力する

3. 画像のサイズを設定する

設定　＞　メディア　で設定する

画像をアップロードした時にリサイズされた画像を自動生成できる。
サムネサイズ、中サイズ、大サイズの3サイズが設定可能
ここで設定した幅と高さがサイズの上限となる。
600pxの画像をアップしたら大サイズ(1024px)は作られず、中と小だけ作られる

サムネイルを実寸法にトリミングする　にチェックをいれると
いい感じにトリミングしてくれる

4. URL構造を設定する

設定　＞　パーマリンク
投稿名にすると、　/company/のようになる
投稿名をクリックすると、その下のカスタム構造では、/%postname%/　と表示される。カスタム構造は直前まで選択されていたルールが表示される。

/%postname%/は構造タグという
カスタム構造で/%category%/%postname%/　とすると、カテゴリー名/投稿タイトルになる。
カテゴリー未設定だと、/uncategorized/company/　のようになる

デフォルトは　p=123(投稿ID)　のようになってしまう

構造タグの一覧

  • %year%：投稿された年

  • %monthnum%：投稿された月

  • %day%：投稿された日

  • %hour%：投稿された時（時間）

  • %minute%：投稿された分

  • %second%：投稿された秒

  • %post_id%：投稿の固有ID

  • %postname%：投稿の記事名

  • %category%：投稿のカテゴリー

  • %author%：投稿の作成者

パーマリンク機能

スラッグを利用したURLを利用できる。
設定＞パーマリンク設定＞投稿名にする

  • xxx.com/?cat=4 → xxx.com/category/diary/

  • xxx.com/?page_id=4 →　xxx.com/about-this-site/

  • xxx.com/?p=4 → xxx.com/hello/

5. プラグインの有効化

デフォルトで、Hello DollyとAkismet Anti-Spamが入っている。
Akismet Anti-Spamは、コメントスパム対策のプラグイン。利用するにはAkismetのAPIキーが必要（商用の場合は有償）

投稿タイプ

  • 投稿ページ

時間軸で表示させる時に使う　（トップページに5件表示させるなど news とかblogとか）

カテゴリーページや、アーカイブも作れる

  • 個別投稿ページ　xxx.com/?p=4（投稿ID4のページ）

  • 固定ページのように親子関係をつくれないが、カテゴリーやタグによって投稿同士を関連付けられる

    • カテゴリーやタグをタクソノミーという　taxonomyは分類の意味

    • カテゴリーは階層構造を持てるがタグは持てない

  • アーカイブページ

    • カテゴリーで分類　xxx.com/?cat=4（カテゴリー投稿ID4のページ）

    • 日にちで分類　xxx.com/?=202403

    • タグで分類　xxx.com/?=tag=bookreview

    • the_excerpt()関数　で続きを読むが実装できる　excerptは抜粋の意味

固定ページは、時間軸にとらわれないページ　（会社概要やお問い合わせなど）
カテゴリーは作れないが、親子関係が作れる

  • 固定ページ

    • アーカイブページがない。

    • タグやカテゴリーをつけられない

    • 階層構造をもたせられる

  • フロントページ

    • 最新の投稿10件表示ができる

    • 固定ページをフロントページにしたり、front-page.phpやhome.phpを利用して別に作ることもできる

6. 投稿する前にカテゴリーを変更する

投稿　＞　カテゴリー
デフォルトでは、右側のペインに「未分類」というカテゴリーがあるけれど、わかりにくいので編集リンクをクリックして編集してみる
名前　お知らせ
スラッグ　news
更新ボタン

新しくカテゴリを追加するには、左側のペインで「新規カテゴリーを追加」のエリアに登録する
名前　コラム
スラッグ　column
新規カテゴリーを追加ボタン

スラッグ

カテゴリーやタグ、投稿記事や固定ページの名前が日本語のままだとURLがエンコードされて読めなくなるので英単語や数字でURL用の別名をつける機能

7. 投稿をしてみる

  • 「新規投稿ボタン」をクリック　＝＞　ブロックエディタが立ち上がる

  • 右上の縦に点が３つ並んでるメニューをクリック　＝＞　一番下の設定をクリック

  • カテゴリとアイキャッチ画像だけをONにする（場合によってタグやカスタムフィールドもON）

  • タイトルと本文を入力

  • タイトルのところをクリックすると右メニューが変わるので、カテゴリーをクリックして該当のカテゴリのチェックボックスをクリック

  • 公開ボタン　＝＞　公開したページをミル

  • 上部の投稿を編集リンクをクリック　＝＞　右メニューのURLの文字列をクリック　＝＞　ツールチップ内のURLを任意の英語のURLに変更

  • 画像の挿入は左上の＋ボタンをクリック　＝＞　メディア　＝＞画像をクリックしてアップロード

  • 画像選択状態だと、右のメニューに画像の設定が表示される　＝＞　ALTや幅や高さを設定できる

  • 見出しの挿入は本文エリア内の＋ボタンをクリックすると、見出しなどが選べる

  • 見出しブロックが現れるので文字を書く　＝＞見出し部分をクリック＝＞ブロックのツールバーが現れる　＝＞h2かh3などの設定が現れる

  • メジャーバージョン：新機能追加。最近は4ヶ月ごとにリリースされる　　3月、8月、11月　リリース直後はテーマが対応せず不具合を起こす可能関がある。新バージョンの検証環境を準備して確認する必要がある

  • マイナーバージョン：不具合修正：自動更新される

WordPressのテーマはWebページのテンプレート
以下のようなテンプレートタグを埋め込む

<h1><?php the_title(); ?></h1>
<p><?php the_date(); ?>
<?php the_content(); ?>

WordPressのテーマ

WordPressを使ってWebサイトを作るということは、基本的にはテーマを作成する作業になります。

テーマの確認は　外観　＝＞　テーマ
テーマの場所　wp-content/themes/ の中

テーマディレクトリの内容
拡張子がphpのファイルは、WPのテンプレートファイル
WPのテーマはテンプレートファイルの集まり

  • assets/ （画像やCSS、JSなど）

  • parts/

  • patterns/

  • readme.txt

  • screenshot.png

  • style.css

  • styles/

  • templates/

  • theme.json

8. 簡単なテーマを作成してみる

  • テーマ名のフォルダを作る

  • 静的なindex.htmlを作る。画像やCSS、JSはassetsフォルダにいれる

  • index.htmlと同じ階層にstyle.cssを作る

style.cssに下記のコメントを記載すると、これがWordPressのテーマであると認識される

/* 
Theme Name: Site no namae
Theme URI: https://example.com
Description: Site no namae のテーマです
Version: 1.0
Author piyopiyo
Author URI piyopiyo.nantoka
*/

  • index.htmlをindex.phpと拡張子を変えて、テーマファイル化する

  • index.php内のcssやjs、画像などの相対リンクを、「テーマのディレクトリまでのURL」を表すテンプレートタグ<?php echo get_template_directory_uri(); ?>/assets/　になるように置換する。実際に、ブラウザで表示されるときは次のようなパスになる。example.com/wp-content/themes/saitononamae/assets/img/…

  • タイトルタグを「設定」→「一般設定」サイトのタイトルを表示するテンプレートタグの<?php bloginfo('name'); ?>に変更する

  • 作成したフォルダ一式をWPのthemesの中にアップロードする

  • ダッシュボードの外観＞テーマから作成したテーマを選択して有効化する

テンプレート階層

  • front-page.php：トップページ　> home.php > index.php

  • single.php：投稿ページ < single-{post_type}.php > single.php > singular.php > index.php

  • page.php：固定ページ

  • category.php：カテゴリーページ < category-{slug}.php >category-{ID}.php > category.php > archive.php > index.php  

  • search.php：検索結果ページ

  • archive.php：投稿一覧 < date.php > index.php

  • 404.php：404ページ

  • index.php：もし各テンプレート.phpがなければ、index.phpが表示される。すべてのページが同じデザインだったらindex.phpだけでもいい。

WPでWebサイトを構築していくうえで、テンプレート階層の設計は重要。
Webサイトの設計に合わせて、適切なテンプレート階層の設計をすることが必要。

テンプレートタグ

  • bloginfo('name');　サイトタイトル

  • bloginfo('description');　ディスクリプション：管理画面＞設定＞一般＞キャッチフレーズ

  • echo home_url();　home_url()でトップページのURLを取得。echoで表示

PHPコード

コメント

# 一行コメント
// 一行コメント
/*
複数行コメント
*/

変数

最初に　$がつく　$の後はアルファベットとアンスコのみ　数字は✕

$supper = '夕飯';
echo $supper;

文字列連結

　.で連結できる

echo '今日は' . $supper . 'を食べた';

定数の宣言

define()でやる。$はつかない
例えば、wp-config.phpでDB接続情報の定義を下記のように設定する

define('DB_NAME', 'database_name_here');

配列の宣言

array();でやる

$week = array('Sun','Mon','Tue','Wed','Tur','Fri','Sat');
$img = array(
 '/img/sample.jpg', 
 '640', 
 '480'
);

配列の呼び出し

<img src="<?php echo $img[0]; ?>" width="<?php echo $img[1]; ?>" height="<?php echo $img[2]; ?>"

連想配列の書き方

配列にわかりやすく名前をつける。呼び出しやすくなる。

$img = array(
 url => '/img/sample.jpg', 
 width => '640', 
 height => '480'
);

連想配列の呼び出し

<img src="<?php echo $img['url']; ?>" width="<?php echo $img['width']; ?>" height="<?php echo $img['height']; ?>"

すでにある配列に要素を追加する

$img = array(
 url => '/img/sample.jpg'
);

これに、widthとheightの配列を追加したい時は下記のようにする

$img['width']=640;
$img['height']=480;

連想配列出ない場合は次のようにする
配列の最後のインデックスに追加される

$img[]=640;

配列の先頭に追加する時はarray_unshift()関数

<?php
$queue = [
    "orange",
    "banana"
];

array_unshift($queue, "apple", "raspberry");
var_dump($queue);
?>

出力結果は下記のようになる

array(4) {
  [0] =>
  string(5) "apple"
  [1] =>
  string(9) "raspberry"
  [2] =>
  string(6) "orange"
  [3] =>
  string(6) "banana"
}

配列の途中に追加する時は、array_splice()関数

例：array_splice( $array, 2, 0, '追加する要素');　
1つ目のパラメータは要素を追加する配列、2つ目は追加する位置、3つ目は置き換える要素数、4つ目が追加する要素の内容になります。

<?php

// 配列を用意
$array = array( 'Shibaken', 'Pomeranian', 'Golden retriever', 'Greyhound', 'Siberian husky');

// 配列に要素を追加
array_splice($array, 2, 0, 'Akitaken');

// 配列の内容を出力
var_dump($array);

出力結果は下記

array(6) {
	[0]=> string(8) "Shibaken"
	[1]=> string(10) "Pomeranian"
	[2]=> string(8) "Akitaken"
	[3]=> string(16) "Golden retriever"
	[4]=> string(9) "Greyhound"
	[5]=> string(14) "Siberian husky"
}

WordPressでの配列の使用例

画像の添付IDを指定して、その画像を表示させる
wp_get_attachment_image_src(指定したIDの画像)

<?php
 $img = wp_get_attachment_image_src(3);
?>

<img src="<?php $img[0]; ?>" width="<?php $img[1]; ?>" height="<?php $img[2]; ?>">

wp_get_attachment_image_src関数の配列は4つあって、0番目が画像のURL、1番目がwidth、2番目がheight、3番目がリサイズなし

WordPressでの連想配列の使用例

投稿を表示するget_posts()関数でよく使う

$args = array (
'post_per_page' => 5,
'category_name' => 'news',
'orderby' => 'date',
);

$posts_array = get_posts($args);

get_posts()の連想配列のキーは3つある。表示件数のpost_per_page、
category_nameでカテゴリー名、表示順のorderbyがある

シングルクォートとダブルクォートの違い

<?php
$title = "今日の晩ごはん";
echo "<h1>$title</h1>";
echo '<h1>$title</h1>';
?>

ダブルクォートは<h1>今日の晩ごはん</h1>と変数が展開される
シングルクォートは<h1>$title</h1>と文字列になる

if文

data('G')で現在時刻を取得できる　WPにはwp_date関数がある

<?php
$hour = date('G');
if($hour < 10){
    echo 'おはようございます';
} elseif($hour < 16){
    echo 'こんにちは';
} elseif($hour < 20){
    echo 'こんばんは';
} else {
    echo 'おやすみなさい';
}
?>

条件は上から順に判定されるので、条件を満たしたらそれ以降のelseifやelseは判定されずに、このブロックは終了となる

ブラケットを使わずに、コロンとセミコロンでもかける。その場合、末尾のブラケットは、endif;

<?php
$hour = date('G');
if($hour < 10):
    echo 'おはようございます';
elseif($hour < 16):
    echo 'こんにちは';
elseif($hour < 20):
    echo 'こんばんは';
else :
    echo 'おやすみなさい';
endif;
?>

WPでの使用例
投稿ページではh1でリンクなし　アーカイブページではh2に投稿ページへのリンクをつける時に使う

<?php
if(is_singular()):
    the_title('<h1>','</h1>');
else :
    the_title( sprintf('<h2><a href="%s"', esc_url(get_permalink())), '</a></h2>');
endif;
?>

is_singular()：投稿ページ
the_title:投稿のタイトル
get_permalink():投稿のパーマリンク
sprintf()は、%sに第二引数の文字列を挿入するPHPの関数

比較演算子

if($month ==1) でも　if(1 ==$month)でもいいけど、WPでは
if(1 ==$month)　を使うことになっている。

while文

条件が合致する間は、その処理を繰り返す
必ず最終的に条件が偽になるようり処理を書く

<?php
$month = 1;
while($month <= 12){
    echo $month . '月';
    $month++;
}
?>

コロンを使った書き方
date('n')を現在の月を取得

<?php
$month = 1;
$end = date('n');
while($month <= $end):
    echo $month . '月';
    $month++;
endwhile;
?>

WordPressでのwhileの使用例

whileは投稿や固定ページなど、DBに保存されているデータを読み出す際に必ず使われる構文・

while(have_post()):
 the_post();
 the_title();
 the_content();
endwhile;

have_post();　投稿データ全体
the_post();　投稿データから最初の投稿を取り出して、元データからその投稿を取り除くという処理　データがなくなったらwhileから抜けられる
the_title();　titleの表示
the_content();　本文の表示

関数

何らかの処理をして返り値を返すもの。
例：date()関数
date関数の第一引数は、出力形式の指定、第二引数は、日時の指定

引数は２種類ある

  • データを指定するもの

  • 処理方法の詳細を指定するもの

引数のない関数

<?php
$today = date('Y年n月j日');
echo $today;
?>

例：phpversion();関数には、引数はなくて、そのサーバのPHPのバージョンを返す

WordPressで使える関数はPHPのビルトイン関数とWordPressのテンプレートタグ関数

よく使うPHPの関数は、文字列の挿入、配列の操作、データチェックなど、データを直接扱う処理。

参考

関数の自作
引数を指定して関数を実行する

<?php
function output_img_link ($img){
    echo '<img src="';
    echo $img;
    echo '">';
}

output_img_link ('../img/hoge.png');
?>

引数に配列を指定する

<?php
function output_img_link ($img){
    echo '<img src="';
    echo $img[0];
    echo '" width="';
    echo $img[1];
    echo '" height="';
    echo $img[2];
    echo '">';
}
$img = array('../img/module_table_bottom.png', '640', '480');
output_img_link ($img);
?>

関数を指定する場所は、変数の上でも下でも、別ファイルに分かれていても、順序も自由。

WordPressで関数を自作する時は、functions.phpに書くことがよくある。
WordPressで自作の関数を作る時は、自作だとぱっと見てわかるように接頭辞として、mdn_をつけることが好ましいとされる。

オブジェクト

オブジェクトは、データとデータの処理方法をまとめて書いたもの

たとえば、変数と関数が分かれている処理だと記載は下記

<?php
    function return_price(){
        global $date; //関数の外側で定義された変数を受け取って使う宣言
        if($date >= 20240401){
            $price = 1000;
        }else{
            $price = 500;
        }
        return $price;
    }
    $date = date("Ymd"); //今日の日付を変数にいれる
    $price = return_price(); //関数を実行
    echo $price; //結果を出力
?>

オブジェクトにしてまとめて書くと下記

<?php
    class Price {
        protected $price; //このクラスと継承クラスからアクセス可能
        public $date; //どこからでもアクセス可能

        public function return_price(){　//どこからでもアクセス可能
            if($this->date >= 20240401){ //メソッドの中で変数を使うときは$this->つける
                $this->price = 1100;
            }else{
                $this->price = 600;
            }
            return $this->price;
        }
    }
    $price = new Price; //インスタンス化（オブジェクトを生成して変数に入れて使えるようにする）
    $price->date = date('Ymd'); //オブジェクトのパブリックの変数に今日の日付を代入
    echo $price->return_price(); //オブジェクトのメソッドの処理結果を出力
?>

参考：グローバル変数とローカル変数

参考：アクセス修飾子

参考：$this->

WordPressでテーマを作る時に、自分でクラスを定義して利用することは、ほとんどない。ただWordPressの関数を利用して投稿データを取得する際に、返り値がオブジェクトとして返ってくるものがあるので、そのオブジェクトからデータを取り出して使う時にアロー演算子などを使って取り出す。

例）WP_Postクラスのオブジェクト　get_post()という関数
下記は、投稿id=3の記事タイトルと投稿日時を表示している

$postdata = get_post(3);
echo $postdata->post_title;
echo $postdata->post_data;

参考

https://elearn.jp/wpman/variable/post.html

昔はWordPress Codex日本語版という関数一覧があったのに、いつの間にか消えていてつらい

例）オブジェクトの配列　get_the_category()という関数の返り値は、オブジェクトそのものではなく、オブジェクトの配列が返ってくる

$cat = get_the_category(3);
echo $cat->cat_name; //get_the_category()は配列なので、これでは取得できない
echo $cat[0]->cat_name;

参考

https://elearn.jp/wpman/function/get_the_category.html

WordPressの関数を利用して値を取り出すときは、配列、オブジェクト、オブジェクトの配列の３種類に分かれる。

この記事が気に入ったらサポートをしてみませんか？