【RaiseTech】超初心者が1から学ぶプログラミング記〜その11〜

公開日:2020/8/26 最終更新日:2021/2/20

こんにちは!ナガタロックです!

このブログでは2020年6月より

RaiseTech 〜WordPress副業コース〜

を受講し、プログラミング超初心者の著者の成長の記録や感じた事を記録して行ってます。

このブログでは

・学習の記録

RaiseTechの学習内容

RaiseTechを受けて感じた事

をまとめています

第11回目の今回は

WordPressに必要なテンプレートファイル&タグについて

です!WordPressを構成するファイルの解説ですね!

いや〜しかし1週間って早い(・・;

あっという間に講義の日曜が来て

あっという間に講義の復習の火曜が来て

日々の自習をこなすうちにまた日曜日

タイム・イズ・マネーの大事さを身に感じる昨今です(`・ω・´)ゞ

WordPressを構成するテンプレートファイル

テンプレートファイルリスト

WordPressを使ってサイトを表示するページ自身や、ページを構成するパーツを出力するためのファイルのこと

トップページ:index.php / front-page.php / home.php

アーカイブページ:archive.php

固定ページ:page.php

詳細ページ:single.php

などで構成されている。

各ページに応じた優先順があるので、把握したうえでページを構成していく。

※トップページの場合

①front-page.php②home.php③index.php

の順でファイルを探しに行く

テーマ作成に必要なファイル

最低限必要なファイル

・index.php ※すべてのファイルの大元にくる

・style.css

この2つがないとテーマは認識されない。

あると良いファイル

・screenshot.png :テーマのスクショ画像でイメージしやすい

・functions.php :テーマ設定用ファイル めっちゃ大事。その機能は後述

・page.php/single.php/archive.php/404.php :ページタイプ振り分けファイル

・header.php/sidebar.php/footer.php/searchform.php/comments.php

:共通パーツ用テンプレート。各ページで共通で使用するパーツ

カスタム投稿とカスタム分類

カスタム投稿とは・・・

WordPress既存の投稿とは異なる、

自分で作れる新しい投稿タイプのこと。

カスタム分類とは・・・

自分で作れる新しい分類のこと

メリット:フロント側で見せる物によって投稿タイプを分けることで、管理画面のどこから入力すればいいのかわかりやすい。

デメリット:実装の工数がかかる

デザインデータのWordPress化

実案件を受ける際、デザインデータをもらってWordPress化していく流れが多い。

デザインデータを見た時に

「固定ページ」「投稿ページ」「カスタム投稿ページ」など

どの部分がなんの役割をさせるのかを見極める力が必要。

デザインを見てどうしなければならないのか?がわかれば、

あとは実現に向けて調べながらでも作業をしていけばよい!

ターム・カテゴリー・タグ・スラッグ

ターム

カテゴリやタグで作成する分類項目のこと。

このブログで言うと

カテゴリーのタームが

「RaiseTech」や「ファジアーノ」「書籍」

あまり聞き慣れない言葉だけど

分類という認識で良いみたいです!

カテゴリー

投稿にデフォルトで存在するタクソノミー(分類基準)で

階層を持っている。フォルダ管理と同義。

タグ

投稿にデフォルトで存在するタクソノミー(分類基準)で

階層を持っていない。ラベリングと同義。

スラッグ

サイトのURLの最後に適用される部分。

ここに入力した文字がURLの最後にあてられる。

パーマリンクはURLの全体を指すのに対し、

スラッグというのはURLのお尻部分のキーワード的な部分のこと。

私が書いている講義ブログの第1回目

‘https://nagatarockblog.com/raise-talk1/

がパーマリンクで、

raise-talk1

がスラッグというわけですね!

カスタムフィールド

カスタムフィールドとは・・・

投稿に新たな入力フィールドを設置出来る。

決まったカテゴリの投稿などで、

入力項目を作っておくことが出来る。

たとえば書籍の紹介の投稿をたくさん行っている場合、

「金額」とか「著者」とかの入力項目を作っておけば

便利でわかりやすい!

style.css

WordPressにテーマを認識させる為に詳細を記述する

•Theme Name テーマの名前
•Description テーマの説明
•Version テーマのバージョン
•Theme URI テーマが公開されているURL
•Author 作者
•Author URI 作者情報のURL
•Tags テーマに関するラベル
•License ライセンス
•License URI ライセンスに関するURL•Text Domain 翻訳時に利用されるテキストドメイン

 

コーディングルール

•インデントにはスペースではなくタブキーを使う
•セクション間に2つの改行をつける。セクション内のブロック間に一つの改行をつける
•各セレクターはカンマもしくは開始中括弧で終了•プロパティと値の行は一つのインデントと終了にセミコロン
•終了を示す中括弧は開始括弧のインデント位置と合わせる
•プロパティの後にはコロンとスペース
•特有の指定がない限り小文字で記述•色の16進数コード記述で省略が可能な場合は省略( #ffffff → #fff )
•なるべくショートハンドで記述(プロパティの上書きを除く 等など、自分だけでなく他人から見てもわかりやすいように記述していくことが大事!

テンプレートタグ

テンプレートタグとは…

WordPressで利用出来る機能を持った専用の関数!

めちゃめちゃたくさんあるのでテンプレートタグで確認。

〜よく使う関数〜

•wp_head() headタグ内に挿入し各種プラグインを出力

•wp_footer() body終了タグ直前に挿入し各種プラグインを出力

・add_theme_support(!title-tag!); ページのタイトルを出力

•wp_list_pages() 固定ページのリンク付リストを出力

•wp_list_categories カテゴリーのリンク付リストを出力

•wp_tag_cloud() タグのリンク付リストを出力

•wp_get_archives() アーカイブのリンク付リストを出力

•wp_nav_menu() ナビゲーションメニューを出力

•wp_enqueue_script() 外部のJavaScriptファイルを読み込み出力

•the_widget() ウィジェットを出力

•next_post_link() 次の記事へのリンクを出力

•previous_post_link() 前の記事へのリンクを出力

等など他にもたくさんあるので、

詳細は講義のファイルを参照しましょう!

functions.phpについて

テーマの設定や特別な機能を持たせるファイル

テーマサポート

・翻訳ファイルの読み込み
・WordPressの吐き出すフォーマットをHTML5に
・カスタムメニューの有効化
・タイトルタグの自動出力
・アイキャッチ画像の有効化
・フィードリンクの有効化

CSS / JavaScriptの呼び出し

htmlとは違いWordPressの場合はfunctions.phpに記述をする。

wp_enqueue_style() ・・・スタイルシートの読み込み
wp_enqueue_script() ・・・JavaScriptの読み込み

ナビゲーションメニューの定義及び設定

「外観」の中にメニューを作成出来る。

現在取り組んでいるハンバーガーサイトのサイドメニューも

ここで読み込んで設定出来るようにする

ウィジェットの定義

WordPressにおけるウィジェットとは

ブログパーツのことで

サイドバーやフッター部分に画像やテキストを追加出来る。

画像サイズの定義

WordPressの管理画面からアップロードされる画像の設定が出来る

add_image_size( $name, $width , $height , $crop)

$name ・・・画像サイズの名前 ※必ず指定する
$width・・・画像の横幅をピクセルで指定
$height・・・画像の縦幅をピクセルで指定
$crop・・・画像の切り抜きを行うか否か true or false

ショートコードの作成

管理画面でphpは実行できないため

functions.php内で定義付けをしてショートコードを登録。

そのショートコードをブロックエディタで呼び出して使う

ユーザー関数の定義

フロントで扱わずテンプレートファイルで扱うものは

ユーザー関数をfunctions.phpで定義をしておいて

呼び出して使う

ナガタロック)

functions.phpで様々な機能を扱う事が出来る。

WordPressのサイトの肝となりそうなファイルである(;・∀・)

トップページの作り方

まず管理画面の「設定→表示設定」でトップページの作り方を選択

front-page.php か home.php でファイルを作成する。

front-pageの方が優先度が高いので、

両ファイルがある場合は気をつける。そもそもfront-pageのみがあれば問題ない。

今日のまとめ

WordPressが

どんなテンプレートファイルで構成されているか?

各テンプレートファイルにどのような機能があるのか?

の解説の講義でした。

今課題で取り組んでいるハンバーガーサイトを

WordPress化していくにあたりどのように

テンプレートファイル化していくのか?

という流れがつかめた。

パッケージ化されたテーマファイルだけじゃなくて

自分で思うようなデザインや機能のサイトが作れるように

なったらすごく楽しそう!!

それに一役買うのがWordPressというわけですね!

まだまだhtml&cssもままならないので、がんばらないと(;・∀・)

質疑応答

Q
講義動画は講座期間終了後も閲覧出来るのか?
A

WordPress副業コース6月度生用の講義動画は期間が過ぎると見れなくなる。

同じ内容の講義動画がUPされるので、講義の復習などはその動画を見る。

このような質疑応答の内容は消えてしまうので、しっかりメモしておこう!

Q
YAT先生が案件で困ったこと
A

IE対応でつまづくことが多い。というかほとんどそれ!

(確かによく困っている様子をつぶやいておられる・・・)

Q
WordPressで作られたサイトの見分け方
A

ソースコードを表示でコード内容を見て「wp」的な言葉が散見されるはず!

割とわかりやすい。

今回は以上となります!!

そしてRaiseTechが気になるという方は

是非公式サイトより無料体験会or受講のお申し込みを(●´ω`●)


ABOUT US

この記事を書いた人

ナガタロック

このサイト作成者の写真

アパレルメーカーに勤める30代男
2020年より「RaiseTech」にてプログラミング学習を開始
講義内容の学習記録
副業に関する情報を発信しています

  • カテゴリー