2024/02/24 学科 CMS構築基礎⑤【オンライン】

今日のアイキャッチの椅子の写真はAdobe Stockからお借りして、犬はいつも通り実家の犬の写真を使いました。

1限目：WordPressのテーマについて
2限目：WordPressのテーマの役割について
3限目~5限目：課題制作

今日教わったこと
参考サイト

今日教わったこと

▼インストールされている場所について
FTPで見た時の「/wp-content/themes/」の中
もしオリジナルテーマを作るなら
　・使いまわしの効率を上げるなら出来るだけ「themes」にまとめておく。
　（同じテーマを別の客先で使う）
　・逆に、依頼元に管理画面からも編集をさせたくない場合は、これ以外の場所にファイルを作成する。
　・ファイル名の重複がおこりやすいので管理とバックアップは要注意！

▼PHPの基本的な作法として
①「」がphpの基本構文。
②プログラムの終了には必ずセミコロン「;」
③拡張子は、「.php」
→わからないなら、「」で始まって「;」で終わる構文には触らない！
　・wordpressはphpを基本として作られている。
　・動的プログラム、サーバサイドプログラム「php」を使って利用している。
　・サーバサイドプログラムなので「Javascript」と違いブラウザでコードを確認出来ない。

・使いまわしたいものをPHPに置き換えていく（Wordpress上で設定している文字コードを引っ張ってきてね、Wordpress状で設定しているサイトタイトルをここに引っ張ってきてねなど）
・バックアップに失敗する時は「このプラグインがおかしい」と言われたりするので「wp-content」の中から該当のプラグインを探し出して削除して再インストールすれば直ったりする

▼必要最低限の構造として以下2ファイルがあれば成立する
もしオリジナルテーマを作るなら
・index.php→全てのテンプレート階層の元になる
　（トップページではなく、ここを元に投稿ページはこう、固定ページはこうといった作り方をしていく）
・style.css→テーマの情報を入力する場所
（やろうと思えば1つのファイルで済む）
極論、作ったLPのhtmlの拡張子をphpに変えるだけで構造上は「オリジナルのテーマ」になる

・screenshot.png(gif jpg)→管理画面のテーマのプレビュー的な画像になる。必須ではないけど無いと困ると思う。推奨サイズは1200×900
px
・立ち上げ準備中やサイト移転の状態であればこれでもいいかも。
・「index.php」のファイル名は重複する可能性が高いので管理に注意。

▼style.cssに記述する
テーマの情報がいろいろ書いてあるけど必須情報は「/～/」と「Theme Name」だけ。
これの後に通常のcssを記述してもいい。
なおファイル名は絶対に「style.css」
例）
/*
Theme Name: sample
Theme URI: /www/sample_test/wp-content/themes（テーマをウェブサイト上で配布してたらここに書いたりする）
Description: 専用テーマ名
Version: 1.0（修正入れた時の管理用）
Author: xxxxx
Author URI: http://samples.sakura.ne.jp/sample_test/（客先のURLとか）
*/

▼インクルードを活用する方法
インクルード＝前頁ヘッダー、フッター、サイドバーのデザインを全ページ共通で適用するために独立させて適用しているファイル
（1ページごとにそのページのヘッダーとかを設定するのはページ数多いと手間でしかないよねという話）
↓インクルードのタグ及びファイル例
・header.php→＜?phpget_header(); ?>
・footer.php→＜?phpget_footer(); ?>（bodyタグの直前に入れる）
・sidebar.php→＜?phpget_sidebar(); ?>
（header.phpのファイルを作って、読み込んでほしい所にを記述して呼び出す）

↓自作テンプレートにする時の例
＜?phpget_template_part(‘sample’); ?>
Sampleの部分をファイル名に変更。

・共通部分のファイルは決められているファイル名になる。
・それ以外のファイル名を使用したい場合は自作テンプレートを利用する。
・タグだけあって使わない場合は「デフォルト」の内容が表示される。
（意図しない表示になってたらこれが原因のことが多い）

▼テンプレート階層について
・全ての元は「index.php」になり、そこに「home.php」、「single.php」などが続く
（詳しくは「wordpressテンプレート階層」で検索）
・そのファイルがない場合は「index.php」が呼ばれる。
・必要なファイルだけをうまく使ってコンパクトにまとめるのが運用のポイント
（納品後に余計なことをできないようにする）

▼ワードプレスの独自タグ
沢山あって覚えられないので詳しくは「ワードプレスの独自タグ」でググる
↓例
文字コードの話（データベースから文字コードを引っ張ってきて）
＜meta charset=””>
→＜meta charset=“UTF-8″>　を返す

・基本的に使わなくても大丈夫だがうまく使えるとテンプレートの使いまわし、サーバー移転に便利。
・条件分岐を使えばより便利。（もし(if)AがBならこれを読みなさい、そうじゃなかったら(else)これを読みなさい(endif; ?)）

※以下は必ず入れる（プラグインや最悪テーマも動かない）※
・head内の情報　
（プラグインはヘッダーに読み込ませているのでこれが無いと読み込めなくて動けない）
・管理ツールバー　
（管理画面最上部の細い黒いツールバー部分。ここが無いと何かと不便なので必ず入れる）

・PHPの構造は見れなくてもWordpressはシェアが多いので何か迷ったらググれば出てくる
・テーマ自体に必要な画像ファイルと、本文中で使うファイルはフォルダを分けておいた方が管理しやすい
・Wordpress関係の書籍はたくさん出てるけど、テーマの作成に触れているものは少ない（初心者向けが多い）ので、必ず本屋で中身を見てから買う