主に竹花貴騎まとめ　プログラミング知識も若干入るよ

竹花貴騎さん、ホリエモン etc…の考えをまとめて発信します。

自分用メモ。（約2万5千字です長いです）WordPress導入から初期設定の流れ。（ローカル環境構築から）

【プログラミング】

mac操作している男性

 

※以前のローカル環境構築で

virtual Boxと

vagrantで構築してるけど、

 

それとはまた別のMAMPでローカル環境作ってます。

 

MAMPは古いらしく、実際の現場ではvagrant主流なのだとか。

※

 


 

WordPressとは、いわば

はてなブログみたいなものでブログの一種で、

自分で好きなデザインに出来るものってイメージ。

 

これを聞くとすごい便利じゃん！ブログデザインに縛りのあるはてなブログよりええやん？

てなるかもだけど

はてなブログとかは記事とかの情報を格納しないといけないサーバーを用意してくれてるから無料で使用できる。

これがWordPressだと自分でこのサーバーを年間契約とかで契約しないといけない。

それが例えば利用者が多いエックスサーバーとか、

安くて安定性があり、強いと評判。

サーバーが強いっていうのは1000人とかが一気にアクセスしても鯖落ちしない。これが強いっていう表現の意味。

 

データ格納庫であるサーバーに預けたら今度は

その情報がどこにあるのか一発で分かるように目印であるドメインを付けないといけない。

ドメインも有料。

お名前.comが有名。それこそ企業のドメインとかはjpとか見た事あるやつばっかだけどそれこそ.workとかだったらすごく安くであるからあんまり気にしないだったらそれでもいい。でもここのドメインを見る人って少数派だからあんま気にしないでいいと思う。

 

一旦まとめると

WordPressではドメイン、サーバーを自分で契約していかないといけない。その代わりデザイン自由だし例えばアフィリエイトダメとかの縛りもなし。

 

はてなブログとかはドメイン、サーバーは既に用意されてるから完全無料（有料プラン除く）なんだけど、

無料になってるだけの理由は当然あって、

広告をはてなブログ側がつける事が出来るって感じ。

だからこの記事とかの最後に広告あると思うけどそれは勝手にはてなブログがつけてる広告。

 

 

◆本題だけど

実際にweb公開するならドメイン、サーバー契約。

今回は一旦ローカル環境（ネットではなく自分のPC上のみで動く、みられる）でする方法。

自分にPC内にローカルのサーバーを作ります。

・MAMPインストールしたら

・WordPressをインストール

ここまでします。

これから2つを紐づけます。※ググって笑

 

 

今回は自分でテーマを作っていくので

まず土台のテーマを作成。（白紙）

macのアプリケーション→mamp→htdocs→にWordPressフォルダを入れます。

 

その中のwp-contents→theme、

ここに任意のフォルダ追加。仮にkohthemeフォルダとします

このフォルダをエディタで開きます。VSコード

開いたら、ファイルを作りましょう。

※フォルダはあの紙を入れる容器的な、水色のやつ。

ファイルとは紙っぺらって感じ。htmlとかphpとかcssとかね。

 

imndex.php style.cssの２ファイルを作ります。

 

さて、WordPressの外観からテーマをみてみると

kohフォルダ作ったのでここに反映されてます。

 

有効化（テーマを採用）できるのでしてみると

白紙。いや、当たり前だが。

index.phpに何かを書くと反映されます。

 

ただ、自分で一から作るのだるいので、

無料の簡潔なものを入れましょう。

 

startbootstrapってサイトで無料の

bootstrapテーマがあるから（clean　blog）

ダウンロード。

 

 このテーマのindex.phpを使いましょう。

解凍した中に入ってるのでこれをkohの中に移します。

もともと作った白紙のindex.phpは削除でOK。

 

そのあと、今度はフォルダごと、

css img js　の３つを移します。

 

あとは、

「WordPress　テンプレートタグ」

で検索すると挿入すると投稿内容が反映されたりするものがあります。

今日の投稿時間が反映されたり。

 

<?php wp_head(); ?>

これを終わりhead（</head>）前に入れます。

※なんか設定してくれます

body終わり前には

<?php wp_footer();?>

を入れましょう。これも設定系なのであまり意味不。

 

次に

エディタの76行目あたりのh2、class="post-title"の中身を

全部消します。

そして

<?php the_title(); ?>

を入れます。

すると投稿文のタイトルが反映されるようになります。

 

さらにちょい下の85行目かな、start bootstrap でaタグありますよね、そこの日付を今日の日付反映させたいので

 

<?php the_time("Y-m-d");?>

で2020-03-04と反映されます。

（）の中身を変えれば表記変わります。

 

・Y月n月j日　l

で2020年3月4日　水曜日

※最後は小文字のエル

 

・Y-n-j

で2020-3-4

※mなら03、nなら3と表記。

※jなら4で、dなら04表記。

 

Yを小文字にすると下2桁表記になります。

2020→20

となります。

 

ハイフンではなくスラッシュで区切ってもOK

Y/m/dこんな感じ

 

（WordPress　org　日本語のWebページ。

https://ja.wordpress.org/support/article/formatting-date-and-time/）

 

詳細はここに。※Yが年を表すとか　Yearの頭文字だね笑

Year month dey

 

 

80行のh3 class="post-subtitle"の所の

ploblems...を消します。

新たに

<?php the_content() ;?>

で本文表記になります。

これはサブタイトルいらないから、本文を載っけちゃえ的な感じ。

 

ただ、これだとまだ本文反映はできません。

そもそも大事な設定があります。

タイトルの反映がたまたま反映されただけって感じです。

 

どこでもいいです、タグとタグの間でいいので

今回は74行目に、

<div class="col-lg-8 col-md-10 mx-auto">
の後に
<?php the_post();?>

を打ちます。

 

するとこれでPOST送信データを受け取れるようになったのかな？わからんけど笑

本文が反映されました。 

 

 次は84あたりの

posted by

の後に　start　bootstrap

とあります。start　bootstrapこれを消して

<?php the_author(); ?>

 と入れましょう。

これは作者を表す所です。

 

今回は直のアンカーエイチレフは使わないので削除。

 

 

 次にCSSがちゃんと適用されてません。

HTMLであれば同列フォルダにあるCSSが適用されるのですがWordPressの特性で適用されないと。

なので、headタグのCSS読み込みに、

CSSのフォルダの場所を指定してあげます。

22行目のここですね

<link href="css/clean-blog.min.css" rel="stylesheet">

ここのCSSの前にwp-content/themes/koh/を入れます。

<link href="wp-content/themes/koh/css/clean-blog.min.css" rel="stylesheet">

すると、

WordPressの、CSS適用前

WordPressの、CSS適用前

 

から、

 

 

WordPressの、CSS適用後

WordPressの、CSS適用後


 

 

になります。CSS適用されてます。 

 

 

 

ただし！！！

手書きはよく無いみたいです…

なのでphp文に直していきます。

 

wp-content/themes/koh/

を消して代わりに、

 

<?php echo get_template_directory_uri(); ?>/

を入れます。

※最後のスラッシュ忘れずに！！！

 

これでWordPress画面更新しても、CSSは適用されたままです。

実際に検証でソースみてみると、php文のところがさっきの

wp-content/themes/kohtheme/になってくれてます

手書きだといちいち訂正しないといけないし、その文ミス増えるのでphp文で自動的に処理させてる感じですね。

 

※もし崩れた場合はスペルミスないか要確認。

 

 

<?php echo get_template_directory_uri(); ?>/

 

これをコピーしてCSS参照してるところにボコボコ貼り付けていきます。

つまり、ここだけじゃないんですね

 

13.14行目あたりの

<!-- bootstrap core CSS-->

の下にvendor、この前に貼り付けます。

<link href="<?php echo get_template_directory_uri(); ?>/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

 

こんな感じ。

※再度、スラッシュ忘れずに。

 

57？56？行目のimgの前にも貼り付け。

 

176？177？あたりのvendor/jQuery前にも。

次の行のvendor/bootstorap前にも。

 

180あたりのjs/clean-blog前にも。

 

 

ヴェンダーがcleanブログからコピーされてないので（意味不）

cleanブログフォルダからkohフォルダに移します。

vendorフォルダの移動

vendorフォルダの移動

 

さらに！！！

毎回毎回　ブラウザがGoogleChromeなら

「翻訳しますか？」

とでてきますよね

 

これはindex.phpの最初の方、languageがen,

つまりenglishだからです。

Chrome賢い…ちゃんと読み込んでるんや。

 

ここを

<html lang="ja">

にしましょう。

 

 

そして、8、9、10行目の

descriptionとauthorとtitle　これらのタグ

は消しちゃいましょう。WordPress側で設定出来るとの事。

 

これでhead設定は完了、かな。

 

次はbodyみていきます。

まずタイトル変えましょう。

 

27か28あたりの

Start Bootstrap を書き換えて

<?php bloginfo('name'); ?>

 

bloginfoで検索すると（）の中（パラメーターという）

が載ってます。今回はname。

 

同じく28あたりの、それこそ直前に

index.html

とありますがここを

<?php echo home_url(); ?>

にかえましょう。

 

これでトップページを取得するみたいです。

（意味不）

 

 

ここで実際に投稿してみましょう。

左上の＋ボタンから投稿します。

投稿して、ホーム戻ると投稿されてます！

 

でも2つ目、3つ目の投稿がそのままなのでそこをどうにかしていきます。

まず、72行目とかに入れてたpost_titleの文を消して、それに変わり以下の2行目を入れます。

（col-lg-8...のあと）

<div class="col-lg-8 col-md-10 mx-auto">
<?php while(have_posts()):the_post(); ?>

 

 84下あたりhr下に

<?php endwhile; ?>

と打ちます。

 

そして、もともとbootstrapにあったフォーマット記事を

削除します。

86,87あたりのpost-previewから125あたりの

hrまで入りませんので削除します。

 

すると、72あたりのpost-previewから

85あたりのendwhileまで、これ一個になりました。

 

解説すると

while

↓

endwhile

これはphpでいう繰り返しのwhile構文ですね。

 

さらにhave-postsはWordPressのテンプレートタグです。

投稿すべきものがあるかどうかで判断してます。

投稿すべきものがありますか？

→YESなら投稿。

→NOなら何もしない。

て感じです。

the_postで取得してきて、the_content（数行下）

を使えるようにしてるみたいです。（あんま意味不）

 

 

条件分岐タグです。

 

「条件分岐タグ　WordPress」とかで検索でOKです。

例えばis_home

であればトップページなのかどうか、とかの条件分岐です。

 

 改めて、

<?php while(have_posts()):the_post(); ?>

 は決まり文句みたいな感じで使ってくので、大事ですとのこと。

 

ここで実際数多くの記事を入れてテストしましょう。

WordPressのテーマユニットテストで検索、ここがいいです。

https://nuuno.net/note/wordpress-testdata/

 

ここの、日本語データ版がいい。

 

するとGitに飛びます。

 

そこの、右端の中央よりちょい下の

「クローンまたはダウンロード」

を押します。

 

そして「ダウンロードZIP」を押します。

 

ダウンロードできました。

そしたら今度はWordPress画面にいきます。

 

ハンバーガーメニューの「ツール」を押してインポートを選びます。

 

その中に「WordPress」ありますのでそれをインストール。

進みます。

そしてファイルを選択とでますのでインストールしたものを入れます。

ここで使うのは語尾がxmlのものです。

ここ、注意しましょう。

これを入れます、そのまま何もいじらず実行します。

※なんかいじらないといけない所出てきますがそのまま実行でOK。

 

そうすると〜に失敗しました…がいっぱいと

最後に成功しましたと出るのでそれでOK。

合計43？くらいのテスト記事が入ります。

 

このままだと全文表示されますよね？

すげえみにくいです。

これは、77行目あたりの

the_contentのせいです。

 

なのでここを、

<?php the_excerpt() ;?>

に変えます。（抜粋という意味です。）

 

■ページング作成（次、前ページのボタン）

次に、「次ページへ」というボタン（WordPress画面の、次のページのボタンです）を作っていきます！

 

87あたりに<!-- Pager-->

ありますよね、

<div class="clearfix">

の下に

<?php next_posts_link(); ?>

を入れましょう。

 

更新すると、次ページへ　が出てきました！！！

 

そして、いまnextpostslinkいれましたね、その下に

<?php previous_posts_link();?>

を入れます。

すると「前のページへ」が作れました〜！

 

もしくは！もしくは上の次、前ページすらも消して

<?php echo paginate_links();?>

と入力すれば

「1.2.3...5次へ」

てゆうよくあるやつがみられます！

 

 

 そして、72あたりのpost_htmlの部分を変えて、

<a href="<?php the_permalink(); ?>">

とします！

パーマというのは恒久的なとか、変わらないって意味なので記事のURLは永久変わりませんよーって意味です。

 

◆「テンプレート階層」

次に、投稿記事をみてみると最初のページと同じ書式になってますよね、

フォーマットが同じ。

なので記事をみても記事ページ移動したことがぱっと見わからない。

なので記事ページの

「テンプレート階層」に着手していきます！

 （テンプレート階層のページ）

 https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4

 

 

 

 

 

 画像の一番右がいま入ってる

index.php

これが大元のテンプレート、フォーマットですね

左に行くにつれて反映の優先順位が決まります。

 

これに用途別、今回でいうとブログ記事を投稿したページに専用でまたフォーマットと適用させたいので

index.phpの2個左（２階層分index.php優先順位が高いのでこっちがブログ投稿時にフォーマットとして採用）に位置する

single.php

を作っていきます。

 

エディタを開いて、普通にファイルを作成します。

こんな感じ

 

すると、白紙のsingle.phpができるので

試しに記事の箇所をクリックすると白紙になってる。

これで白紙のsingle.php が適用されているとわかります。

 

 

そして、bootstrapのフォルダ内に既に投稿記事フォーマットあるので使います、名前が

「post.html」

この中身をsingle.phpにコピペしましょう。

 

そして、index.phpでしたこと（設定）をもう一回していきましょう！

 

復習がてら、 

  1. languageを"ja" に。これでChromeの「翻訳しますか」が出なくなる※jaはjapanese（日本語）の略 
  2. そして、head内のauthor,description,titleは不要、消しましょう。
  3.  <!-- Bootstrap core CSS-->の下、linkのhrefのvendorの前に、
    <?php echo get_template_directory_uri(); ?>/
    を入力。※最後のスラッシュ忘れずに
  4. <!-- Custom fonts for this template -->
    の下のvendor前にも、３と同じの貼り付け
  5. さらに
    <!-- Custom styles for this template -->
    の下にも３と同じphp echo get template directory　uriを※ここだけ、href=cssになってる。vendorのではなく、CSSの前に入れましょう。※vendorとか、cssの他にもjs、imgの前にも入れるよ（imgは6手順で紹介）　ガチURL（https...）の前には挿入しないように。
  6. 3,4,5の処理はCSS適用させるためとかの読み込み用のPHP文なので画像のタグあればこのタグ入れます。imgタグ、52行目あたりにあるので入れます。すると、こんな感じ。※command+fでimgで探せば楽だね
    <header class="masthead" style="background-image: url('<?php echo get_template_directory_uri(); ?>/img/post-bg.jpg')">
  7. 一番下155,156,159行目あたりにもvendor,jsから始まるのあるのでそこにも入れます。こんな感じ。
    <!-- Bootstrap core JavaScript -->
    <script src="<?php echo get_template_directory_uri(); ?>/vendor/jquery/jquery.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Custom scripts for this template -->
    <script src="<?php echo get_template_directory_uri(); ?>/js/clean-blog.min.js"></script>
  8. そして、根本的な大事な設定、</head>と</body>の前にそれぞれ<?php wp_head();?>　と　<?php wp_footer();?>を入れます。※</footrer>の前ではないので注意、</body>の前ね。　あと、wp_headだからね！headerではないよ！ここ実際間違えたとこだから気をつけて笑
  9. nav終わりタグ（ナビゲーションタグ）の後に、繰り返し文、ループを入れましょう。※50行目あたり　
    <?php while(have_posts()):the_post();?>
    この文を入れます。
  10. header内の60行目あたりにタイトルのh１文あります　Man must...のやつ。ここのタイトルが投稿記事のタイトルになるようにphp文で情報取得できるように、　
    <?php the_title();?>
    の文を入れます。
  11. その下のサブタイトルh２、特に要らないので消しましょう。※いるなら残してOK
  12. その下のmetaのspan部分、ここに
    Posted by<?php the_author(); ?>on <?php the_time("Y-m-d") ;?>
    を挿入。（inde.phpから持ってきました）一旦ここまでで、
    <div class="post-heading">
    <h1><?php the_title();?></h1>
    <span class="meta">Posted by<?php the_author(); ?>on <?php the_time("Y-m-d") ;?></span>
    </div>

    こんな感じになります。※もしmetaない記事ならここも削除OK
  13. 74行目あたりのarticle内、
    <div class="col-lg-8 col-md-10 mx-auto">
    の中はすべてテンプレの仮中身の内容なのでここ全部消します、かなり多い量を消すので躊躇うかも、びびるかも。そして投稿記事の本文がここに表示されるように 
    <?php the_content(); ?>
    　のphp文を入れます。
  14. そして、while文を9.手順で入れてるので<?php endwhile?>を入れてあげましょう。ループする所は<header>,<article>,<hr>なので、<hr>の後に入れます。※80行目あたり　するとこんな感じ　
    <hr>

    <?php endwhile; ?>

    <!-- Footer -->
    　※<hr>はホライゾン、水平線という意味でそのまんま、記事と記事を分ける水平な横線の事。これは終わりタグなし。 <article></article>は、この間は記事を表す、という意味。

これでOK。

 

こんな感じで毎回、設定していきます

 

今後例えばコンタクトページが作りたい…と思うのであればテンプレート階層みると「page.php」を作ればとりあえずOKとわかるので、page.phpフォルダを作成する。bootstrapに「contact.html」が用意されてるのでこれをコピペ。

そしてまた上の1〜14の設定をしていけばOK！！！

 

 

 

簡単♪

 

 

◆「functions.php」の存在

階層テンプレートにはないが、大事なファイルが。

それがfunctions.phpでいろいろな機能をまとめたものです。

例えばいままで消してきたtitleタグ、

実際タイトルないと困るけどindex.phpとかに書いてもページ事に変化した最適なタイトルが出ない。

それがWordPressは機能として最適タイトルつけられるから、その機能を入れていく。

いきなり、functions.phpに

<?php
function init_func(){
add_theme_support('title-tag');
}

と入れる。

これがtitle-tag　の関数です。

 

（WordPress日本語、関数リファレンスの参照ページ：https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9）

 

init functionはこのかたまりの名前って感じ。この関数というか、処理の名前って感じ。

ビールを注ぐの’注ぐ’の部分って感じ

このinit functionを発動させるコードを書いてあげないといけません、面倒だね…

add_action('init','init_func');

このコードを書く。呪文として覚えてOK、ただ意味は

アクションフック、（）内のinitすまり初期化するときに（ページ移るときとか）init_funcを発動してね、って意味。

 

次にアイキャッチ画像設定する画面を設定していきます、ややこし笑

 

左上のとこ押して「投稿一覧」にいきましょう。

そして何か一個記事みてみて、右上の設定（歯車ボタン）押すと

WordPress　投稿ページ

こんな感じ。このディスカッションの下かな？ここにアイキャッチ設定メニューいれるみたい。

<?php
function init_func(){
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
}

post-thumbnailsのとこね、こんな感じ。

 

そしたらアイキャッチ画像と出てきます。

※出てこないときは必死にググったりファイル名が間違っていないかみてみましょう。僕はファイル名が

function.phpになってました。

functions.phpが正しいのに。

 

アイキャッチ画像なにか投稿して更新しましょうか、商用可能なDisney画像を選びました〜♡

 

ただ、これで記事にいってもまだ画像はもとのままなのでここも変えます。

 

single.phpが投稿ページをいじるところなので

ここのヘッダーの54行目あたりのバックグラウンドイメージのurlを以前　echo get_template....をいれましたよね、あれごと消してください！

 

中身すっからかんにします、こんな感じ

<header class="masthead" style="background-image: url('')">

んで、代わりにheaderタグのすぐ上に以下のphp文追記をしてください。

<?php the_post_thumbnail(); ?>

よって、

<?php the_post_thumbnail(); ?>
<header class="masthead" style="background-image: url('')">

こんな感じになると思います。

 

投稿ページ戻ってみて、シンデレラ城の画像になってるがなあああああああああああああああ！

 

ただ、画像のサイズおそらくあってないと思う。

ここでどんでん返しだけど、上で書いたphp文も再び書き換えます....二度手間（ ;  ; ）

<?php
$id = get_post_thumbnail_id();
$img = wp_get_attachment_image_src($id);
?>

に書き換えます。

imgのURLを取得しないといけないので、

idを取得してこないといけないらしいよ（意味不）

そしてurlのカッコ内にもphp文追記します！

echo $img[0];をいれるらしい、入れると、

<header class="masthead" style="background-image: url('<?php echo $img[0]; ?>')">

こんな感じに！

 

画像をアップすると画像ごとに

idがつくみたいです。

そのidを取得して、バックグラウンドに適用してるって感じ。

$img = wp_get_attachment_image_src($id);

このphp文はWordPress設定に

「ライブラリ」てとこあります。アイキャッチの画像とか、とにかく画像系はここに入る…総合フォルダみたいな感じでここから画像取得してくるけど画像どれって感じ。

その目印として($id)、つまりidを頼りに取得してる感じ。

echo $img[0]

ここの部分は、とってきたimgデータの0番目を取得してechoしてって感じ

1.2番目には確か縦、横の長さとかの情報があるような...

そんな感じ笑

 

 

 ◆カスタム三兄弟

◆カスタムフィールドのプラグイン

 

投稿記事に例えば商品、価格を載せたい。

商売したいときは投稿記事を作成する際にそういう記入項目あった方がよくないですか？

 

投稿ページを設定できる、項目増やせるのがカスタムフィールドです。

 

設定のプラグインで新規追加、

そして「advanced custom fields」

で検索、

 

ACF

（緑でACFとかいてるやつ、作者eliot）

これをインストール＆有効化

 

すると設定バーに「カスタムフィールド」と出てくるので新規追加。

 

タイトルを例えば「商品情報」

として、それに関する情報をフィールドに追加で追加していく。

 

「商品情報」ってラベルのくくりで

設定する事は例えば

「発売日」「価格」とかを設定。いろいろあるので自分で中の設定は試してみる事。

 

そして、それだけだと表示されない。

なぜならsingle.phpにphp文書いて表示させないと。

 

結論、articleの所にこんな感じで書いて。

<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<?php the_content(); ?>
<dl>
<dt>価格</dt>
<dd><?php echo number_format(get_field('価格')); ?>円</dd>
<dt>発売日</dt>
<dd><?php the_field('発売日'); ?></dd>
</dl>
</div>
</div>
</div>
</article>

dlでデータタグなので書いて、

get_field('価格')で価格という名前のものを取得しますよ、って感じ

発売日も同じ感じ。

echo number_format

は純粋にphpの関数で3桁ごとにカンマ打ってくれるやつ。

1500→1,500　こんな感じ。

たぶんカスタムフィールド追加ごとにsingle.phpに描きこまなんかも...面倒やね笑

 

 

 

◆カスタム投稿（ポスト）タイプ

 

上では投稿ページの中の、項目を増やしたけど

今度は投稿ページ自体のタイプを増やせれば楽じゃないですか？

 

・商品用の投稿ページ

・ブログ用、

・お知らせ用.......

 

こんな感じで。

 

functions.phpに書き込んでいきます。

inic_funcのカッコ内にレジスターポストタイプを書き込んでこんな感じに。

<?php
function init_func(){
add_theme_support('title-tag');
add_theme_support('post-thumbnails');

register_post_type('item');
}

 

まだ終わって無いです、そしたらさらにその中に

こんな感じで追記を。

register_post_type('item',[
'labels' => [
'name' => '商品',
],
'public' => true,
'has_archive' => true,
'hierarchical' => false,
'menu_position' => 5,
'menu_icon' => ''
]);

※itemはこちらでつけている名前ですので任意です。item ってところが記事開いた時にURLに載ってくるので気をつけて！

また、ここで名付けていいものは以下を避けてください。既に予約済みです。（＝使用済み）

予約済みの投稿タイプ

次の投稿タイプは WordPress が使用するために予約されています。

  • post - 投稿
  • page - 固定ページ
  • attachment - 添付ファイル
  • revision - リビジョン
  • nav_menu_item - ナビゲーションメニュー

 

※labelsがあります、ここに書いてる配列は

例えばnameの所は、設定バーに出てくる「商品」てところに反映されます。

「register post type」でぐぐったページの下あたり、細かい設定というとこに出てきます。

（参照：https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_post_type）

 

いろんな所の名前（例えば商品投稿ページで　「投稿を公開します」とデフォルトで出てくる所を「商品を公開します」と管理者に優しくわかるように書き換える事もできます。WordPressを作成して配布する時とか、これ設定しててあげるとわかりやすいですよね、だからです。今回は日本人の私が使うので'商品'とか日本語していいですが

'name'               => _x( 'Books', 'post type general name', 'your-plugin-textdomain' ),
		'singular_name'      => _x( 'Book', 'post type singular name', 'your-plugin-textdomain' ),
		'menu_name'          => _x( 'Books', 'admin menu', 'your-plugin-textdomain' ),
		'name_admin_bar'     => _x( 'Book', 'add new on admin bar', 'your-plugin-textdomain' ),
		'add_new'            => _x( 'Add New', 'book', 'your-plugin-textdomain' ),
		'add_new_item'       => __( 'Add New Book', 'your-plugin-textdomain' ),
		'new_item'           => __( 'New Book', 'your-plugin-textdomain' ),
		'edit_item'          => __( 'Edit Book', 'your-plugin-textdomain' ),
		'view_item'          => __( 'View Book', 'your-plugin-textdomain' ),
		'all_items'          => __( 'All Books', 'your-plugin-textdomain' ),
		'search_items'       => __( 'Search Books', 'your-plugin-textdomain' ),
		'parent_item_colon'  => __( 'Parent Books:', 'your-plugin-textdomain' ),
		'not_found'          => __( 'No books found.', 'your-plugin-textdomain' ),
		'not_found_in_trash' => __( 'No books found in Trash.', 'your-plugin-textdomain' )

こんな感じで国際化対応すればWordPressのテーマ配布ができるようになります。

つまり、自分だけで使用するなら

'labels' => [
'name' => '商品',
'singular_name' => '商品',
'add_new' => '商品を追加',
'add_new_item' => '商品を追加',
'edit_item' => '商品を編集',
'new_item' => '新しい商品',
'all_items' => 'すべての商品',
'view_item' => '商品をみる',
'search_items' => '商品を探す',
'not_found' => '商品は見つかりませんでした',
'not_found_in_trash' => 'ゴミ箱は空です',
'parent_item_colon' => '',
'menu_item' => '商品',

こんな感じで日本語指定もいいけど

WordPress配布するなら国際化対応しないといけないよって話。

）

 

 

 

さっきも少し触れたけど設定バーに「商品」というポストタイプが出てきました！

早速クリックしてここから新規投稿？追加？しましょう

 

タイトル、内容です。

タイトルと内容の間にパーマリンクがあると思います。

そこでURL好きにいじれます。

仮にタイトル「CSS入門書」の場合はURLが

http://localhost/koh/item/css入門書

となるのでここを

http://localhost/koh/item/css.basic

こんな風にできます。

 

そしてここで投稿ボタンではなく、一回「設定」の

「パーマリンク設定」にいきましょう。

そこの一番下の「変更を保存」をクリックしましょう。

なぜかというと、不思議な現象というか、

新しくポストタイプを追加した際は（functions.phpに書き込んだ時は）ここの設定→パーマリンク

の変更保存を押さないといけないみたい。

バグではないが、仕様って感じ。

 

それからもう一回商品（さっきかいたCSS入門書のページ）

に戻り、投稿するとしっかり表示されます。

 

※パーマリンク設定の変更押さないと投稿しても表示されない...

 

 

ここでカスタムフィールドをクリック。

 

作ってた商品情報をクリック。

「位置」って欄があると思う。わかる？

 

そこに

このフィールドグループを表示する条件

ってのがあるから左から3つ目を

投稿→商品　に変更。

更新して、　すると、

ポストタイプ商品を選んだら価格、発売日の項目がでてくる！

 

ここでつながった！

 

・親子関係を作る

 

さらに書き換えなんですが、上のヒエラルキーってとこを書き換えます。

'hierarchical' => true,
'supports' =>[
'title',
'editer',
'page-attributes'
],

※カンマ多いので間違えないように！

 

falseからtrueにすることで「商品」記事追加投稿画面の右に

「親」っていう項目が出てきます。（親にCSS入門書とか出てくると思います、し商品追加ページです出てくるの、普通の記事投稿画面には親項目出てこないです）

これは、固定ページによくみられるこの記事の関連の記事の関連の記事....ってかんじで

どんどん階層が深くなっていく記事を作る時に親子関係って呼び方というか、総称で扱っていきます。

わかりづらいね。笑

 

なのでブログの投稿記事だと、すべての記事が対等じゃないですか、

昨日の記事と今日の記事は対等でお互い自立してると思うんです。

でも固定ページだと

固定ページ→お問い合わせ、このブログについて...とか

関連する記事が出てきます、こういう感じです。

 

falseにすると親項目消えます。

 

 

'menu_position' => 5,

この文の数字は「商品」の設定バー内での位置を決めてます。

5区切りで大きくなるほど下の方にいきます。

1にすると設定バーの一番上のメニューとして「商品」が出てきます。

 

まあやってみればわかる。

 

'menu_icon' => ''

 

これは「商品」の左側にアイコン設定できます。

Amazonも商品カートに入れると思いますが、カートのアイコン、絵がありますよね？それを設定できます。

 

ユーザーではなく管理者の為のUIって感じですね。

（WordPress配布するなら管理者になるユーザーの為のUIって感じにはなるが。）

 

「dashicons」で検索　ダッシュアイコンね

（参照：https://developer.wordpress.org/resource/dashicons/#image-flip-vertical）

上のサイトがおそらく一番上に出てきます。

 

 

下らへんにちょうどカートあるのでクリック。

そしてここをコピペでメニューアイコンphp文に入れます。

 

 

 

カートのアイコン画像



 

こんな感じ！

 

以上、register_post_typeを使うと

記事投稿が便利になるでした！

 

◆普通の投稿記事にも発売日や価格が出てくる件の解消

 

これは、簡単でカスタム投稿（今回でいうと「商品」をカスタムしたのでこれ）専用の

ファイルを用意してあげればいい

 

.....つまりWordPress階層をみます！

すると

single.phpの左の方にカスタム投稿用のページあるじゃないですか！

 

「single-$posttype.php」

てやつです。

$がついてると大抵変数です。

なので実際には$posttype、ここが変わります。

 

それがどこかというと

functions.phpで書いた

register_post_typeの'item'、

これです！

 

なので、

「single-item.php」

というフォルダを作ります！！！

 

VScode（エディタ）開いてください、

single.phpを複製しましょう。

※地味に複製方法迷うと思います。

左メニューの一番上、紙が２枚重なってるのありますよね

そこ押すとフォルダからファイル名までの階層が出てきます。（既に出てる人が大半かも）

 

VScodeの階層

 

 

※ちなみにこれ。

 

ここのsingle.phpをコピーして、

ペーストするだけ！

※command+c

command+vでOK。（macの人）

 

右クリックしてrenameで

single-item.php に書き換えてあげましょう。

 

そしたらsingle.phpの方には

76行目あたりの

<dl>
<dt>価格</dt>
<dd><?php echo number_format(get_field('価格')); ?>円</dd>
<dt>発売日</dt>
<dd><?php the_field('発売日'); ?></dd>
</dl>

いらないので削除。

 

これで普通の投稿ページから発売日とか価格を消すことができました！

 

 

◆商品　の一覧

 

ちなみに商品から使うしたやつ、反映されてないですがどこから一覧見れるかというと

http://localhost/koh/item/

でみられます。

 

これはつまり、商品記事のURL、

「CSS入門書」の時に

http://localhost/koh/item/css.basic

にしたと思いますがここのcss.basicを消してるだけです。なので感覚的には階層一個戻って、全体が見れるようにしてる感じです。

 

 

ここの一覧を今度は作り込んでいきましょう。

 

 

テンプレ階層みましょう、ここの部分を作ります。

テンプレ階層　アーカイブ編

 

この

archive-$posttype.php

ね

これも$なので

archive-item.php

になりますねー

 

これは、index.phpをコピーします。

※テンプレ階層を右にいってぶち当たるのがindex.php なので。

※その右にあるarchive.phpを作ってもいいけど、結構広義なので（適用が広いので）archive-$posttype.phpを作ってるって感じ。

 

※postって投稿って意味ね！たぶん笑

 

archive-item.php作ったら

中身編集しますよ

 

タイトルがClean.blogなので

商品一覧に変えて、サブタイトルも消しましょう！

headerがこんな感じ、

<header class="masthead" style="background-image: url('<?php echo get_template_directory_uri(); ?>/img/home-bg.jpg')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="site-heading">
<h1>商品一覧</h1>
</div>
</div>
</div>
</div>
</header>

 

そして、記事の下にでてくる抜粋（一覧みた時にちょこっと本文載るでしょ？それのこと）もいらないので

77行目あたりの

<h3 class="post-subtitle">
<?php the_excerpt() ;?>
</h3>

を丸ごと削除。イグザプト消します

その下の

<p class="post-meta">Posted by
<?php the_author(); ?>
on <?php the_time("Y-m-d") ;?></p>

日付ですね、これも消しましょう。

 

そして、価格：1,500円

こんな感じで商品下に表示したいので

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

のすぐ下、</div>の直前に

<p>価格：<?php echo number_format(get_field('価格'));?>円</p>

を追記しましょう。

※pで価格：◯◯円のフォーマットですね、そしてphpの所で

echo number_format()は3桁区切りの関数でしたね、

get_field('')でカッコ内の情報を受け取りますって感じ（ここでは値段の1500の部分）

商品一覧ページ

 

はい、こんな感じに！

 

以上、商品一覧ページでした

 
◆カスタム分類（タクソノミー）

カテゴリ 、タグとかの分類ありますが、

これをさらに増やす方法です！

 

 今回は、カスタム投稿の「商品」で使える

「商品カテゴリー」をつくりましょう！

 

functions.phpの最後の行、add_actionと{の上にphp文いれてこんな感じにしてください

register_taxonomy('item_category','item',[
'labels' => [
'name' => '商品カテゴリー',
],
'hierarchical' => true,
]);
}

add_action('init','init_func');

 

全体的にみると

<?php
function init_func(){
add_theme_support('title-tag');
add_theme_support('post-thumbnails');

register_post_type('item',[
'labels' => [
'name' => '商品',
'singular_name' => '商品',
'add_new' => '商品を追加',
'add_new_item' => '商品を追加',
'edit_item' => '商品を編集',
'new_item' => '新しい商品',
'all_items' => 'すべての商品',
'view_item' => '商品をみる',
'search_items' => '商品を探す',
'not_found' => '商品は見つかりませんでした',
'not_found_in_trash' => 'ゴミ箱は空です',
'parent_item_colon' => '',
'menu_item' => '商品',
],
'public' => true,
'has_archive' => true,
'hierarchical' => true,
'supports' =>[
'title',
'editer',
'page-attributes'
],
'menu_position' => 5,
'menu_icon' => 'dashicons-cart'
]);

register_taxonomy('item_category','item',[
'labels' => [
'name' => '商品カテゴリー',
],
'hierarchical' => true,
]);
}

add_action('init','init_func');

いま、functions.phpの中はこんな感じです。 

 

WordPressに戻って「商品」をみてみると

「商品カテゴリー」というカテゴリーができてますか？それなら成功です

 

hierarchicalが

trueならカテゴリ ー、

falseにすると自分で自由追加できるタグに変わります。

意味わかんないと思うのでやってみればOK。

 

カテゴリーは親を設定できます

タグは自分で決めて、すべて並列つまり対等な関係になります。

 

これは自分のお好みというか、便利なほうで。

 

register_taxonomy('item_category','item'

のitemをpostに変えれば

「投稿」のところに「商品カテゴリーが移動します

固定ページに「商品カテゴリー」をいれたいなら

pageに変更です。

 

●おさらい●

・post→投稿ページ

・$posttype（ここではitem）→カスタム投稿（ここでは「商品」）

・page→固定ページ

これでOK

 

ただ、追加投稿ボタン押してみて右側みてみてもカテゴリー、タグしかなく「商品カテゴリー」がない。これは

そしてグーテンベルクというものが入ってるので出てこないみたい。

※Gutenberg（グーテンベルク）は、WordPress 5.0 に搭載されたビジュアルエディターで WordPress 4.9.8 からはプラグインとしてインストールし、Gutenbergを利用することができる

なので新たに設定します。

 

さっき書いたhierarchical の下に

'hierarchical' => false,
'show_in_rest' => true,

 こんな感じ。

 

するとグーテンベルクにでてくるようになります、こんな感じ

グーテンベルク

 

 rest apiを通じて取得できるようにしてるみたいです（意味不）

呪文として覚えてOK

 

 

※何かしら変更したらパーマリンクを更新して！！！

そしたら設定反映されるよ！

何かおかしいなと感じたらするべし。

◆商品カテゴリーの表示記事の編集

商品で追加投稿しましょう。

その前に、functions.phpのregister_taxonomyのhierarchicalを

trueにしときましょう。

 

そして商品追加。

 

WordPress入門書2　価格4000円で発売日2020/3/12

にしたとします。

 

右側のカテゴリーに

「WordPress」として作成しておいてください。

 

そして設定のパーマリンク設定を更新。

 

そして「商品カテゴリー」から

「WordPress」があるので選択します。

 

するとこんな画面だと思います。

 

 

商品カテゴリーのページ

 

前置き長くなったけどここの画面を編集していきます！！！

タイトルとかclean blogのままだから変えないとね

 

ちなみにURL、

http://localhost/koh/item_category/wordpress/

のitem_categoryの部分は

register_taxonomyの最初の分類名の部分が反映されてます！

 

 

さて、このページのテンプレートは現在

index.phpなので編集するとなると

テンプレ階層のまず目的の部分が

「カスタムタクソノミーアーカイブ」

なので、

 「taxonomy.php」 

だと思いますが、ただ今回はというか、

このctaxonomy.phpは基本種類多くなるらしいので今回は分類別で管理できるように

「taxonomy-$taxonomy.php」

で管理していきます！

 

$taxonomyは、

register_taxonomyのitem_categoryが該当します。

なので、

「taxonomy-item_category.php」

を作ります。

index.phpをコピって作ってください

 

作ったら編集していきます。

タイトル変えましょう。

headerのh1、ここを

カテゴリー別商品一覧

とかに変えましょうか。

 

あとは前と同じ感じでh1下のサブタイトル消すとか、

日付いらないならmain contentの日付のとこ消せばOK

 

で、すごい話とぶけどいきなりだけど

single-item.phpに（カスタム投稿だね）

<dt>カテゴリー</dt>
<?php
$terms = get_the_terms(get_the_ID(),'item_category');
foreach ($terms as $term):
?>
<dd><?php echo $term -> name;?></dd>
<?php
endforeach;
?>

を入れて。

場所はdlタグの

dt商品dtのすぐ上！

結果dl

がこんな感じに。

<dl>
<dt>カテゴリー</dt>
<?php
$terms = get_the_terms(get_the_ID(),'item_category');
foreach ($terms as $term):
?>
<dd><a href="<?php echo get_term_link($term -> slug,'item_category');?>"><?php echo htmlspecialchars($term -> name);?></a></dd>
<?php
endforeach;
?>
<dt>価格</dt>
<dd><?php echo number_format(get_field('価格')); ?>円</dd>
<dt>発売日</dt>
<dd><?php the_field('発売日'); ?></dd>
</dl>

 

こうすることで投稿ページにタグが出現してくれます。

タームを取得します、そのためにIDを目印にするのでゲットIDします

また、カテゴリータクソノミーは何個もつけることできるのでforeach文で全て取り出してあげます。

aタグはリンクつけてます、なのでカテゴリータクソノミー押すとカテゴリー商品一覧に飛べるように。

 

完全に呪文。php勉強しないとわからんよ。

foreachはなんとなくわかるし勉強したけど忘れてるわ。やっぱアウトプットすることを都度勉強しないと身につかないね。アウトプットが最高のインプットだね。

 

するとこんな感じに。

 

カテゴリーのついたカスタム投稿ページ

 

 

この章は以上！

 

 

◆パーツごとにわけて（head等）管理しやすいようにしよう。

もし仮にhead編集しようとなると

すべてのファイルを編集しないとなので面倒です。

 

なので分けます。

 

完全新規でheader.phpを作ります。（つまり空白）

そしてindex.phpのhead部分を切り取ってheader.phpに貼り付け。

※headの中を切り取って、貼り付けるファイル名はheader.phpだからね！注意！

あと、切り取りだよ。command+xで切り取り。貼り付けするから。

 

※しくじった人用にheadの中身

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap core CSS -->
<link href="<?php echo get_template_directory_uri(); ?>/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

<!-- Custom styles for this template -->
<link href="<?php echo get_template_directory_uri(); ?>/css/clean-blog.min.css" rel="stylesheet">
<?php wp_head();?>

 

そして空っぽになったindex.phpのheadの中に

<?php get_header(); ?>

を入れましょう。

 

<?php get_header(); ?>

を全てのファイルに置き換えていきましょう。

※最初でしとけば楽だったね...

 

 

次はfooterです。

切り取るのは、index.phpの

</footer>から</body>の間です。

つまりこれ


<!-- Bootstrap core JavaScript -->
<script src="<?php echo get_template_directory_uri(); ?>/vendor/jquery/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Custom scripts for this template -->
<script src="<?php echo get_template_directory_uri(); ?>/js/clean-blog.min.js"></script>
<?php wp_footer() ;?>

 

同じように今度は

footer.php作って同じように代わりに

<?php get_footer(); ?>

をおきましょう。

 

こんな感じの共通項？は

get header

get footer

の他に

get side ber

があります。

それ以外で共通項作る時は自作できます。なんと便利なテンプレートタグ........それをしていきましょう。

 

 

今度はnavを作っていきましょう。

この共通項を作っていきます。

これだけは別フォルダにしましょうか、

名前はなんでもいいのですが

「includes」にします（含むという意味）

そのフォルダの中に

「nav.php」

を作ります。

 

includesフォルダの中のnav.phpファイル

 

あとは一緒のような感じで

index.phpの

<nav>〜</nav>

を切り取って、nav.phpにいれます。

代わりに

<?php get_template_part('includes/nav'); ?>

をいれます。

’’の中はアクセスの階層だね※nav.phpの.phpは不要

 

同じ要領で<footer>〜</footer>もまとめられます！なのでまとめましょう！！！

※このfooterの中身はget footerではないので注意！なので自作テンプレートタグ作ります。<?php get_template_part('includes/footer'); ?>

こんな感じ。

 

ただ、お気づきですかね、さきほどfooter.php作ってます。

ただし！！！フォルダが違うのでOKって感じです

vendor/footer

と、

includes/footer

なのでOK！

 

 

 

 

◆上のバー、邪魔だよね、それ下に降ろそうの巻

 

いつも設定とか押すとコネ、上の。

下のおろすのはプラグインで解決

 

「bottom admin bar」で検索。

めっちゃ下にあります

これインストール＆有効化

bottom admin bar

 

すると下にいきます。

 

 

◆固定ページの作成〜特別な固定ページ〜

 

小題のとおり、固定ページを特別なものにしていきます。

固定ページ記事を作りましょう

適当にタイトルを「特別な固定ページ」とかにします

本文「こんにちは〜」とかに。

 

LPですね、ランディングページを作っていけます。

既存のブログページと性格というか、雰囲気が違うものを作っていけます。

 

テンプレート階層みましょう。

左から、

個別ページ→固定ページ→ページテンプレート→標準テンプレート

 

そのうち、左に近い

「page-$slug.php」の方がいいです。

※idの方は、１記事事にID振り分けられてるんですが、面倒なのでslugにします

ちなみにIDの見方は、固定ページ作成ページのURLにpost=2151とか書いてます、この数字です。

 

このslugというのは固定ページ作成ページで

「パーマリンク」ってのがありますよね？右側に

URLスラッグを設定できます

ここの部分ですね

試しにURLスラッグを「special」にします

それで更新します

 

このspecialスラッグをいれてファイル作ります。

page.phpを複製し、リネームで

page-special.php

にします

試しに<header>〜</header>を消しましょう

するとヘッダーなくなるので本文だけが出てきます。

 

ただ！これもLP事にテンプレ作らないとで面倒なので、、、

テンプレ階層に書いてある、少し左の

$custom.php

を作っていきます。

このcustomは完全にオリジナルでOKです

なのでLPのページテンプレなので

lp-page-template.php

にします

 

そして一番上に、

<!DOCTYPE html>の上に

<?php
/*
Template Name: LP用レイアウト
*/
?>

といれます。

※最初が大文字だったり、スペース入れたりなどここは忠実に書いてください。

 

これを作って＋上の文を入れることで、固定ページ作成ページで

「ページ属性」ってところでテンプレートが出てきます。

ここで選べるように！

なので、page-$id.phpを作っていくよりも簡単に済むって感じです。

 

デフォルトテンプレートだと普通のやつだね、

 

ここの選択肢にLP用テンプレートってあります

そう、ここで

lp-page-template.phpが選ばれます

多分本文だけでてきますよね

（僕はここで何も映らないバグ...）

 

あとは、lp-page-template.phpを自分好みに設定すればOK

 

ひとまずこれで終了です。

 

すげえ適当なメモなので、また綺麗にまとめます（っていって多分まとめないね笑）

 

以上。

 

 

 

好きな言葉は「自由と多様性と好奇心」