近いうちにワードプレス講座します。

DAILY

おは!最近はもうずっと眠いwこのワードプレス記事を書いたのはもう数日前ですが、ついに公開します。多分この記事だけ読んでもなんのことかちんぷんかんぷんな人が多いと思うのですが、近いうちにワードプレス講座をみんなのためにしたいなと思うので、その子達がこの記事をみれば復習できるようにまずまとめてみました!楽しみ!

⬇︎⬇︎⬇︎ということで、ここから過去のわたしの記事が始まります。

昨日はスワロフスキーのペンに、ロザリオと聖母マリアのペンダントと、尊いアイテムを数点ゲット。相変わらず幸せな日々だけど、昨日は本当に結構やばかった。幸せのレベルというか人生の質が上がった(;_;)。。。ふああ~~~

今日のラブSONGStay with you

[su_youtube url=”https://www.youtube.com/watch?v=q2bEzpfhDJQ” autoplay=”yes”]

 

めちゃくちゃ尊いソングなので聞いてみて。私は今日ピンクと薄黄色のお花を買ってお掃除して今大理石のテーブルの上に置いて久々に落ち着いてブログ書いてます。しかもデスクライト以外は全部消して今までみてきた最高な景色とかこれから出会うだろう人たちを想像しながら😭感銘。。。

 

ということで、最近やっと掴みかけてきた(遅すぎる)ワードプレスのまとめをしようと思います。今日はワードプレス講座です!みなさんの中にもブログをオリジナルで作りたい!って方は多いのではないでしょうか!(いつかこの講座やりたいなあ~!私が実際に受けてみたいものだったから!)

ワードプレスのテーマ・テンプレートを作るにあたっての手順。

1)まずhtml/cssを作る

2)wpのテーマに変換

3)index.phpを完成させる。

という流れ。

記事ページ single.php

固定ページ page.php

というふうに、それぞれ使うべきテンプレートの名前が決まっています。

固定ページは管理画面からどんどん追加できます。例えば今回私が作ったものでいうと、「会社概要」とか「サービス内容」のページです。固定された内容で、更新される必要のないもの。

そして記事ページというのはその名の通り、記事としてどんどん更新して行くものです。

記事ページというものは1つじゃないですよね。

例えば、「WORKS」でポートフォリオを載せて行ったり、「NEWS」で最新情報を更新して行ったり。そういう時にはそれぞれ項目が違うじゃないですか。書くべき項目。

WORKSだったら「作者」「作品名」を書く欄が必要かもしれないし、NEWSだったらその内容?カテゴリー的なのを選択させたいかもしれないし。

そういうものを更新するたびにそれぞれ簡単に設定できるフォームが必要ですよね?ブログのように更新して行きたいならば。

ワードプレスではその「書くときのフォーム」が設定できるのです。元からの投稿画面ではなく、自分なりに投稿画面をカスタマイズしてくので、この投稿タイプのことを「カスタム投稿」タイプと言います。

ということで、どうやってその管理画面のフォームを作って行くか!それは、プラグインを使えば簡単に作成できます。

Custom Post Type UIというプラグインです。

使い方はこの方が詳しく説明されているのでぜひこちらを参照しながら作り上げて行ってみてください。

http://kotori-blog.com/wordpress/custom_post_type_ui/

ただ、私はこれを読んでも所々理解できないところがあって。。。(初心者なら誰しもつまずくポイントだと思うのですがどこにも解説されてないのですよね・・・検索しても)

そこらへんも含めて丁寧に解説して行きたいと思います。ガチ初心者様のために!

まずは新規作成して行きます。

1)「投稿タイプ」の名前には、「これからどんな投稿ページを作るか?」を名付ければOKです。例えばさっき言ったような「WORKS」とか「TOPICS」のことね。これはほぼIDとして使われることになるので英数字で設定しましょう;)

あとは

2)「ラベル」は管理画面のサイドバーに表示される名前となります。こちらは自分がわかりやすいように!日本語でもOKです。システムには関係ありません。

で、下の方にカスタム投稿タイプの「システム」を設定して行く欄があるのですがここで大!!!注意です!これだけは忘れないで!

Has Archive

こちらを必ず「True」にしてください。

これはカスタム投稿タイプの「アーカイブページを作成するかどうか」の設定です。ここが「False」になっているとアーカイブページを表示することができません。

カスタム投稿タイプのアーカイブページが必要なら「True」に設定します。

(アーカイブとは、投稿して行った記事がまとめられたページのことです。)

階層

記事に階層をもたせるかどうかの設定です。ここをTrue」にすると「固定ページ」の様に「親」を設定して記事同士に階層構造を持たせることが出来ます。階層を、持たせるんだから自分が親になれます!Falseだと親になれないのでただ親にぶら下がった投稿ページになりますよということ。早い話「False」が「投稿」。「True」が「固定ページ」です。

Show in Menu

ここで「管理画面上のメニューの項目としてカスタム投稿タイプを含める」ことができるらしい!「True」の状態でフィールドに追加したいメニューをクリックした時のリンク先のファイル名を入力します。例えば「投稿」メニューの中に入れる場合は「投稿」をクリックすると「edit.php」に飛ぶので「edit.php」と入力します。

そのほかアイコンを設定したりタクソノミーを設定できたり結構色々設定できるよう!上記に挙げたような大事な設定内容もここに全て含まれていたとは・・・!私はこんな設定には目もくれずに「どうせゴミクズみたいなことつらつら書いてあるだけやろ」という感じで全てスルーしてガンガンバグにぶち当たってました。(だって説明読んでも意味わかんないんだもん。゚(゚´ω`゚)゚。一度経験して、解決するとめっちゃ覚えるしめっちゃ簡単になるよね)

・「設定」「パーマリンク設定」で、リンクの設定ができるのでこちらもぜひみてみてください!ここは結構重要です。リンクの表示が違ってたらホームページ内が何も繋がらなくなって本当にわけわかんないから。゚(゚´ω`゚)゚。

そしてどうやって更新して行くかというと、

そしてそして!テンプレート作って行きます。まず、作り上げてきたコードたちですが、ヘッダーやフッターなど共通部分が沢山ありますよね。それは全て他のファイルに分割!そして統一!

例えば・・・

index.phpを分割していきますと

  • header.php(ヘッダー)
  • footer.php(フッター)
  • sidebar.php(サイドバー そのままw
  • function.php(ブログ設定)

となります。

header.phpには

<?php get_header(): ?>

という記述を</head>直前に置くことでindex.phpがヘッダーとして読み込んでくれます。絶対に書きましょう。そういう設定なのです。

sidebar.phpには

<?php get_sidebar() ?>

footer.phpにも同じく

<?php get_footer(): ?>

を記入して行きましょう:)カキカキ。

さて。CSSとの連結はheader.phpで行なっていますよね。(いつも通りheadの中で行われているものがheader.phpに含まれているだけです。)

で、その呼び出しに必要なワードプレス専用の便利なタグがあるのです。

CSS

<?php echo get_stylesheet_uri(); ?>

で当てましょう。ルートを描いてた部分にこちらを当てはめるだけです。(なんて簡単なの!!!)

このように、

スタイルシート設定してるheadercssを設定する、とか、テーマから「おいでー!」と呼び出すのをテンプレートタグといいます。

テンプレートタグというのは他にも大量にありまして!

タイトルだったら

<?php wp_title(‘|’, true , ‘right’); bloginfo(‘name’); ?>

と記入して行きます。

例えばね、

<h1><a><?php echo home_url(‘/’); ?><?php bloginfo(‘name’); ?></a></h1>

👆こんな風にタイトルが書かれていた部分に丸ごと置き換えるだけなのです。:)CSSと一緒ですね!

fuctions.phpにはこういうこと書いて行きます。

例えば・・・

<?php

add_theme_support_(‘menus’);

?>

と入れると、管理画面からメニューのカスタマイズできるようになります。ワードプレスの管理画面をどうするか!みたいな設定です。「外観」というタブから「メニュー」タブを追加できたり、固定ページ追加したりホームへのリンク追加したりできる。(らしいよ!)

ここでやっと今まで作ってきたheader.phpとかfooterphpsidebar.phpをいかにページに組み込んでいくか!という内容になります!

テーマへの反映のさせ方

<?php wp_nav_menu(); ?>

という風に、たった1行書くだけで他のページで書いたコードたちがそこに現れるのです!

例えばヘッダー入れたーい!と思ったところに

<?php wp_header(); ?>を入れる!

簡単すぎた。

  • サイドバーをヴィジェットにしたい!

そんな時も、functions.phpで設定できます。

⬇︎サイドバーを登録してねー!ってこと。

register_sidebar(
array(
‘before_widget’ => ‘<div class=”widget”>,
‘after_widget’ => ‘</div>,
‘before_title’ => ‘<div class=”<h3>”>,
‘after_title’ => ‘<div class=”</h3>”>,
)
);

このarrayって書き方は「配列」と行って、いっぺんにいろんな設定を並べていけばいいだけだよ!って感じで簡単に羅列していくだけの便利な書き方。難しそうに見えてそうでもないです。

before_widgetではwidgetの前に置きたい文字を置くの。
after_widgetではwidgetの後に置きたい文字。そのままだね。
before_titletではtitleの前に置きたい文字を置くの。
before_titleではtitleの後に置きたい文字。

で、このwidgetとかtitleってなんなの?ってことなんだけどそれは設定を見ればすぐにわかります:)タイトルとかヴィジェットを書くところがあるんだけどそれを出力した時に、今設定したものがセットでかかれますよー!ということ。

  • 配列に関してはこちらをどうぞ!❤️

https://wordpressmatome.com/array%E6%96%87%EF%BC%88%E9%85%8D%E5%88%97%EF%BC%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/

array文は、配列を使う際に用います。配列というのはデータを沢山入れられる箱の様な役割。自分でデータを入れられる数を決めたり、配列の名前を決めたりする事が可能。もっと専門的に言うと、array文を使うと、同一の型のデータを一列に並べる事が出来る。

配列中の各データを配列の要素(element)といいます。で、 配列にはその配列全体を指すための名前(配列名)がつく。

要素は「キーと値」のセットの事。配列では、配列名のキーを指定して、値を取り出す事が出来ます。配列はarray文を使わなくても作れます。

例えば。
<?php
$test[0] = 4;
$test[1] = 40;
$test[2] = ‘テスト;
echo $test[2];
?>

同じ$testという変数に対して適用に数字を振って行きます。で、[2]の$testが欲しいー!と思えばecho $test[2];と記述するだけです。[2]の$test変数をechoで表示してくださーい!ということね。array文を使わずとも、上記のようにインデックス配列が作れます。

ではarray文を使うとどのように書けるか?

<?php
$test = array(10, 20,テスト);
echo $test[1];
?>

$testという変数は(10,20,’テスト’)が入ってますよー!で、[1]の変数を出力してねー!ってこと。

ここで注意なのは、一番最初の10は[0]だってことです。:)array文を使った場合、自動的にキーが0から順番に割り当てられます。配列の呼び出し方は、変数名[キー番号]となります。

さて、ここからはWordPressでよく使われる「連想配列」について。

<?php
$fruits = array(
‘appple’ => ‘リンゴ,
‘banana’ => ‘バナナ,
‘strawberry’ => ‘
);
echo  $fruits[‘banana’];
?>

実行結果:バナナ
といったように、連想配列では「=>」の記号を使って、キーと値に割り当てています。もしWordPressでこのような記述を見かけたら、連想配列でキーを値に割り当てているんだなと分かってもらいたい。さっきの数字を文字に置き換えてるだけでやってること何も変わらないですね。。。

二番目ー!って言ったら二番目にふられてるバナナをだせ!Banana~~!って言ったらbananaがふられてる’バナナ’をだせ!Bananaってキーがふられてる’’バナナ”ってゆう値をだせ!ということ。

で、$fruitsの中の’banana’がふられてる値をだせ!って命令は今まで通りEcho $fruits[‘banana’]; 🍌!!!で良いわけですねー!ウンウン。

例えばタイトルが「今日の日記」だったら

<h3>今日の日記</h3>

みたいに勝手にhtmlを書いてくれます。:)なんて楽なんだ!で、このヴィジェット使うためにsidebar.phpも書き換えて行きます。ヴィジェットになる部分を全て消して、代わりに<?php dynamic_sidebar(); ?>を追加します。

 

ちなみに。

WordPressのテーマには、そのテーマの中でのみ利用可能になる独自関数というものが設定できます。独自関数を設定するファイルは、「functions.php」です。このファイルで設定を行わなければ、WordPressの管理画面上でウィジェットの利用や、カスタムメニューの利用は不可能でして、それをarrayを使って設定できるようです。
今回は、実際の連想配列を使ったarray文を知ってもらうために、ウィジェットの設定内容を記述した。
下記の内容を「functions.php」の中に記述しなければ、管理画面のメニュー「外観」→「ウィジェット」をクリックしても「ウィジェット」の追加・編集が出来ない。

functions.phpでサイドバーのウィジェット利用できるようにする記述内容

<?php
register_sidebar( array(
'name' => 'サイドバーのウィジェット',
'id' => 'sidebar',
'description' => 'サイドバーのウィジェットエリア',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
) );
?>

register_sidebarというボックス?を用意して、arrayで色々割り当てていきます。(雑w)nameはサイドバーのヴィジェットとしてね!idはsidebarだよ!descriptionには「サイドバーのヴィジェットエリア」と書いてね!ヴィジェットの前には<div id=~~~」と書いてね!ヴィジェットの前には</div>を入れてな〜〜!という諸々の指示を一括で行なっているのがお判りでしょうか・・・・。

ループの書き方

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

もし投稿があるならば!
投稿がある限り、
投稿を表示してください。

というそのままの命令ですね。
そして、

<?php endwhile;
else:?>

<p>記事はありません!</p>
<?php endif;?>

もしそうでなければ(つまり投稿がなければ)
記事はありません!と表示してね。
Php終わり!

という命令です。

これもそのまんまやw

個別記事へのリンク表示

それぞれの記事に飛ぶにはそれぞれにリンクが必要です!さてどうするか。

<a href=”<?php echo the_parmalink(); ?>”>

パーマリンク表示させてね。という命令。(echoは表示しろ!という命令)

<?php the_title(); ?>
タイトルを表示させてね!という命令。

<?php echo get_the_date(); ?>
日付をgetして、echoしてね!という命令。つまり日付を取得して出力しろ!と言っています。そしてカテゴリ表示させたい時は<?php the_category(,); ?>と書いて、<?php the_excerpt(); ?>こちらでは抜粋を表示できます!

これ全部テンプレートタグなんだけど、このテンプレタグ無数にあって、全て元から決まってます!【WordPress Codex】というサイトに全てまとまっているので使いたいものがあれば都度調べてコードをチェックして書いていってね!アイキャッチ画像を表示させるテンプレタグもあるので何が含まれているか色々みてみてください!