# WordPressについて
###### tags:`自主勉強`

つまづいた時は、Q＆Aの所を見てみよう。

# WordPressの開発環境を、Local by Flywheelで作成する。

WordPress.comではなく、[WordPress.org](https://wordpress.org)で検索し、インストールする。

二つは全く違うサービスである。しっかりカスタマイズする時はorgを使う。
* orgは、オープンソースの配布サイト
* .comは、ブログのレンタルサービス

まずは、ドキュメンテーションから、[動作環境を確認する](https://ja.wordpress.org/support/article/before-you-install/)。

ここでは、サーバーの要件が記載されている
- PHP 7.3 以上
- MySQL 5.6 以上または MariaDB 10.1 以上

phpを動かすには、apacheなどを使用するが、それが面倒なため、MANPを用いたりする。
しかし、ここでは、**LOCALというものを用いて行う！MANPの設定などを行わない！**

[localにアクセス](https://localwp.com)し、ダウンロード。E:mailは必須項目。

こんなのが作れる。ここにWordPressの環境を構築していく

1. CREATE A NEW SITE
2. site's nameを適当に入力し、ADVANCED　OPSITONを押す。
3. Choose your environment と出てくる。ここでは
　Customを選択。
4. Webサーバー、DBのMySQLは、とりあえず最新にする。
　また、Webサーバーは今回はApacheにする。サーバーの要件によって変わる。
5. Userネームは、メールアドレス　WordPressEmailは、Userネームでのメルアド
6. ここでのADVANCEDオプションでは、マルチサイト（一つのWPで、複数のサイトを起動するというもの。）かどうか来る。ここではNOにする。

7. 左の緑の所か、右のStopで、Webサーバーを止める事ができる。LocalHostの所で、起動するとページが公開される。
8. 右側の『OPEN Site』で、ワードプレスのページを確認できる。
9. 『ADMIN』を押すと、管理画面に飛ぶ事ができる。
10. 管理画面で、EmailとPassを入力し、日本語版にする。
11. General/Sitelangeage
12. TimeZoneを、UTC+9にする。-> Save change
13. プラグイン/新規追加
14. 検索のところで、『multibyte』と検索し、『WP Multi Byte Patch』をインストール。
日本語のマルチバイト文字列で起こる不具合を修正してくれる。
15. こいつを有効か

ワードプレスは、左上から、今作ってるサイトをみる事ができる。

ブラウザは、クローム、エディタはVSCを使用する。
VSCは、日本語版にする事もできる。

# テーマの確認と変更

1. adminで、管理画面にアクセス
2. 今の自分のサイトはこんな感じだが、これはテーマを用いられているからこうなっている。

3. 管理画面のー＞外観で、テーマを確認できる。
4. そして、ここにある別のテーマを有効かすると、
5. サイトの雰囲気をガラッと変えることができる。（中には、機能が大きく変わるものになる。）

## テーマを作成するため…

1. localの、myサイトを右クリック
2. そして、『Reveal in folder』を選択し、Myサイトのあるディレクトリをみる事ができる。**アップロードする時は、これを使う。**
3. 上げるフォルダは、`mysite/app/public`に行き着く。
4. これの中の`wp-content/themes`に入っている。

新規でテーマを追加する場合、管理画面の『新規追加→無料の適当なテーマをインストール。』テーマは4つ確認できる。


すると、ローカル上のテーマの中にも、テーマが追加されている事が分かる。


1. twentytwentyにテーマを切り替え、Webサイトを見てみる。
2. この状態で、ローカル内のtwenty-twentyのフォルダ内を見る
3. そして、VSCを開き、『index.php』を見てみる
4. 20行の後に、`<p>Themaを変更しました</p>`とでも入れてみよう。それでファイルを保存し、サイトをリロード。
5. すると、文字が変更されているのが分かる。

## テンプレート階層を知る。
とりあえず、twenty-twentyのテーマを見たいので、
`mysite/app/public/wp-content/themes/twentytwenty`を見よう。

twentytwentyのフォルダを、VSCで開く。

helloworldという所にも反映させるとき、VSCで、
`singular.php`を編集する。

つまり、TOPページのテンプレートの大元はindex.phpであり、
詳細のページのテンプレートは、singular.phpになっている。
これは、**テンプレート階層が適応されている**。
[テンプレート階層について](https://wpdocs.osdn.jp/テンプレート階層)

ここで大切なのは、外観図である。
この図、一番左側には、画面の名前が書かれている。
一番右には、index.phpが入っている。そして、全てつばがっている。

つまり、**一番重要なのはindex.phpである。これさえあれば、テーマとして機能する事ができる**。無くなると画面が真っ白になり、テーマが壊れる。管理画面でもみる事ができない。

また、ここでは、**左にあるファイルほど、優先度が高い**。
つまり、index.phpに変更があっても、singular.phpの方が適応されるので、先ほどは文字が表示されなかった。

つまり、single.phpやpage.phpがあるなら、singular.phpよりも優先度が高くなる。

## Query Monitorで、テンプレートを確認

1. Localの中の、Adminをクリック。
2. プラグインで、新規追加し、
3. QueryMonitorを検索し、有効化
4. Topページに戻ってみる。Mysite(左上をクリック)
5. 真ん中あたりに、新しく表示されているのが分かる。
つまり、テンプレートに、index.phpが使用されてる事が分かる

6. アーカイブでも調べてみると、同じようにindex.phpが使われてる事が分かる。
7. 逆に、HelloWorldの所で、QueryMonitorを見てみると、**singler.phpが使用**されてるのが分かる。
8. ここで、single.phpを新たに作成すると、ここがsingle.phpになる

これにより、前の画像での、どこのテンプレートが使用されているかが、分かりやすくなる。

## テーマを作成する

1. 現在の状態を確認するために、管理画面のダッシュボード→外観→テーマをクリック。（ここでは2020である）
2. LOCALに戻り、MYsiteを右クリック→Reveal in folderをクリック
3. Mysite/app/publicが、WordPressの、ルートフォルダ。その中の、wp-content/themeが、wordpressのテーマである。
4. ここで、新規フォルダを作成。そして、管理画面でリロードすると、スタイルシートが見つからないエラーになる。
5. mythemaのフォルダを、VSCで開く。
6. ここで、**index.phpとstyle.css**を作成し、リロードすると、何にもないけど、一応テーマとして読み込んでくれる。
7. style.cssは、新しいcssを取り込んで読み込ませる事も可能だが、テーマの設定ファイルとしての役割も持つ。
8. style.cssに以下の文章を打ってmysiteをリロードすると、

/*
Theme Name: sample
*/

テーマの名前が、sampleに変更される。つまり、**style.cssの中のコメントアウト分で、themaの詳細を設定できる。**他にも、こんなものも追加できる。

version: 1.0
Author: 私
Description: このテーマは自作です。

これは、[公式ドキュメントの、テーマの作成の部分で確認できる。](https://wpdocs.osdn.jp/テーマの作成)
9. ここから、テンプレートタグを書いていきたい。index.phpにこれを入力すると、Helloworldが出るはず。

<?php the_title();?> 

10. 管理画面に戻り、投稿→新規追加
ここから、新しいタイトルですと打ってみる。そして、右側の公開ボタンを押して、公開する。
11. そして、mysiteを開いてみると、『新しいタイトルです』に変わっている！

## 子テーマとは？
既存のテーマなどから、サイトを直接編集していると、
ver_upなどが起こった際に、面倒になる。
そこで、既存のテーマ＋子テーマを作成し、
通常管理する。

1. LOCALに戻り、MYsiteを右クリック→Reveal in folderをクリック
2. Mysite/app/publicが、WordPressの、ルートフォルダ。その中の、wp-content/themeが、wordpressのテーマである。
3. 今回は、『twentytwenty』を上書きしていく。
4. /themeのフォルダで、新しいフォルダを作成。これをVSCで開く。
（ここではmy_twenty）
5. style.cssを作成する。
そして、cssには、情報を入れる。

/*
Theme Name: My Twenty
Author: 私
Version: 1.0
Template: twentytwenty
*/

これがあると、index.phpがなくても、エラーが起こらなくなる。
そして`Template: twentytwenty`があるのなら、
それの子テーマですと表示される。
そして、テーマを有効化して確認してみると、
**Twenty Twentyのindex.phpが継がれたテーマ**として使用される。
しかし、**styleshettは引き継がれない。**
このため、スタイルシートを引き継ぐ必要がある。

### cssの引き継ぎ
1. ここでは、twentytwentyの中のstyle.cssで、
冒頭部分のコメントアウトを外した状態で、自分のcssにペーストする。
この状態でmysiteをみると、更新されている。
この時、テンプレートを見てみると、twentytwenty/index.phpがテンプレートのなっていると確認できる。

子テーマは、親テーマを上書きするのに使われる。
既存テーマをカスタマイズする時には、これがよく使われる。

# オリジナルのブログテーマを作成する。

今回は、[startbootstrapという所](https://startbootstrap.com)から、ダウンロードしていく。
（旧バージョン）
themesから、色んなテーマがあるので、確認しよう。
利用する場合は、ライセンスをしっかり確認しよう。

1. Localを起動し、Mysite/app/public/wp-content/themeを開く
2. ちなみに、DLしたテーマのindex.htmlをクリックし、どんなサイトになるかを確認できる。
3. ここで、DLしたやつを、/themeの中に入れておく。theme名は、ここでは『myblog』にしておく
4. このフォルダをVSCで開く。そして、管理画面の外観→themaから、確認する。myblogは、まだstyle.cssがないのでエラーがある。
5. CSSは、CSSというフォルダに入っている。この中のファイルを移動させる事もできるが、**空のCSSでも問題ないので、新しく作る。**
6. そして、以下のように作成する。

/*
Theme Name: My Blog
Author: Ito
Description: Themeの練習
Version: 1.0
*/

7. index.htmlに、骨組みが記載されている。そのため、
**index.htmlを、index.phpにする。**

8. ここで再読み込みすると、テーマが出来上がっている。
しかし、CSSが読み込まれていない。index.phpとのリンク先が異なってるため。

Word Pressでは、相対パスの場所が変わる。
**ブラウザで公開されている部分は、publicという所になっているから。**

そのため、絶対パスで指定し直す必要がある。
元々のコード
`<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">`
を、以下のように変更する。

<link href="http://localhost:10004/wp-content/themes/bs_theme/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

そして、`http://localhost:10004/wp-content/themes/myblog/`の部分までをコピーしておく。そして、すぐ下のコードに記載する。
<!-- Custom fonts for this template -->のコメント文の所と、
<!-- Custom styles for this template -->のコメントの所の二つ。
また、フォント文の所で、httpsになっている所を、httpにしておく。

### 講座では、localhost:10004の部分がmysite.localになっている
そのため、エラーが起こる。ブラウザの開発者ツールのWebインスペクターから、
絶対パスになるディレクトリ名を確認しておく。

## phpを体験する。
とりあえず、index.phpの、26行目あたりに
bodyがある。ここの下に、

<?php echo date('Y');?>

と入れてみる。すると、左端に今年の日付が表示される。
phpは、サーバーコンピューターに命令をして、実行する事ができる。
<?php echo date('Y');?>というように、タグで囲めば、htmlの中に埋め込める事ができる。

63行目のこの部分を、

  <h1>Clean Blog</h1>

<h1>Clean Blog <?php echo date('Y');?></h1>

とすれば、今年の表示にする事ができる。
これを使うためには、ファイルの拡張子を、
.htmlではなく、.phpと記載する必要がある。

* echoは、文字などを出力するという意味
* dateは、今日の日付、時間を取得する関数
* date('Y')なら、年（year）という物を持ってくる。これがnなら月になる。
* dateで今日の日付を知り、それをechoで出力するというプログラムの順序になっている。

## テンプレートタグについて

ファンクションの仲間のようなもの。
myblogの中の、index.phpの79行目あたりに、以下の記述がある。

<h2 class="post-title">
              Man must explore, and this is exploration at its greatest
            </h2>

これを、いかに変更する。

<h2 class="post-title">
    <?php the_title();?>         
            </h2>

すると、少し前に、新しいタイトルですと、表示される。
これは、Word Pressのみで使用可能であり、
通常のPHPでは使用できない

[wordPressテンプレートタグ](https://wpdocs.osdn.jp/テンプレートタグ)という所で、種類が記載されている。

titleなら、前、後の文に、何を記載するかを設定する事ができる。
`<?php the_title('・','A');?>`
なら文の前に・後にAを置く事ができる。
これらは、必須と書いてあれば必須であるが、
**オプションと書いてあるパラメータなら、飛ばしても良い。**
[タイトルタグ](https://wpdocs.osdn.jp/テンプレートタグthe_title)

### 基本となるテンプレートタグ

実は、必須となるテンプレートタグがある。
それは、`<?php wp_head();?>`というタグである。
これは、テーマテンプレートファイル内の、</head>タグの直前で使用する。
今回は24行目に</head>があるので、その直前に
これを記載する。
これは必ず、**全てのテンプレートファイルに記載しなければならない。**

もう一つある。
`<?php wp_footer();?>`と記載する。これは、</body>の直前で使う。ここでは、182行目あたりで使用する。

これをつけると、管理ツールバーが表示されるようになる。
これらは、**プラグインや、WPでの動作をするために必要なので、必ずこの2つの記述する。**

### 変数と戻り値
`<?php the_title('・','A',false);?>`
とfalse をつけると、変数として返す事ができる。
例えば、
`<?php $title = the_title('・','A',false);?>
<?php echo $title;?>
`
とすれば、titleの名前を変数として、呼び出す事ができる。

また、以下のように記述すると、titleの中の、**新しいという記述を、古いという言葉に変える**事ができる。

<?php echo str_replace('新しい','古い',$title);?>

### 投稿がない時の一覧を作成する。

1. 管理バーから、ダッシュボードをクリック
2. 投稿をクリックし、チェックボックスをクリックし、
3. ゴミ箱へ移動とする

すると、空のタグが出力されている。
タイトルが空っぽのため。
そのため、投稿がある時とない時で処理を分岐させる。

ここで変更するのは、index.phpの、76行目以降を変更する。

     <div class="post-preview">
     <a href="post.html">
            <h2 class="post-title">
            <?php the_title();?>  
            </h2>

ここの表記をいかに変更する
する。:がついているのは、途中である事を表している。

    <?php if (have_posts()): ?>
     <div class="post-preview">
     <a href="post.html">
            <h2 class="post-title">
            <?php the_title();?>  
            </h2>

次に、130行目あたりの`<!-- Papper-->`近くの、divにて、以下を記述する。

<!-- Pager -->
        <div class="clearfix">
          <a class="btn btn-primary float-right" href="#">Older Posts &rarr;</a>
        </div>
        <?php else: ?>
          <p>記事が見つかりませんでした</p>
        <?php endif; ?> 
      </div>

すると、記事が見つかりませんでしたという内容に変化する。

ここで、新規の投稿の部分を押してみると…？

新たに更新される！！

<?php if true or false ?>
 true or falseどっちかの時に出る内容
<?php else ?>
上で選んでない方を表示

という用に表す事ができる。

今回使用した`have_posts()`は、投稿があるかないか
ということを示す関数であると、**ドキュメントに書いてある。**True or Falseで書いてある

変数に示すなら、こんな形で示そう。
`<?php $lists　= (have_posts()); ?>`
`<?php if(lists): ?>`