見出し画像
Photo by akiyohox

#100 WordPressを学びなおす

em

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


1. 環境設定

WPでよく使われるレンサバやテーマ、プラグインはこちらで確認できる。
https://wp-search.org/ja/

  • サブドメインを作る

  • サイト設定する　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キーが必要（商用の場合は有償）

WP Multibyte Patchというプラグインは、日本語版 WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行うプラグインで、インストールすべきという記事があったけれど、2020年以降はあまり更新されなかったり、レビューが少なかったりするので、もう少し情報を集めてからインストールしようと思う。

投稿タイプ

  • 投稿ページ

時間軸で表示させる時に使う　（トップページに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の関数を利用して値を取り出すときは、配列、オブジェクト、オブジェクトの配列の３種類に分かれる。

いいなと思ったら応援しよう！