-本日のアジェンダ-
1限目
学科 CMS構築基礎②
WordPressのテーマについて
・phpについて
「」 がphpの基本構文です。 プログラムの終了には必ずセミコロン「;」になります。 拡張子は、「.php」になります。
・wordpressはphpを基本として作られています。
・動的プログラム、サーバサイドプログラム「php」を使って利用しています。
・サーバサイドプログラムなので「Javascript」と違いブラウザでコードを確認出来ません。
・WordPress最低限の構造
index.php
style.css
簡単なページであればindex.phpだけでも成り立つ
・管理画面のテーマの画像になる
screenshot.png(gif jpg)
・Style.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/
*/
検索ワード wordpress style.css テーマ情報
WordPressは「style.css」のコメントアウト部分を
見てテーマの情報を読み取るため、オリジナルテーマ
の情報はここに記述します。
必須項目は「 Theme Name 」だけです。
・インクルードを活用
コピーライトなど複数のページで活用するページに使用する
・テンプレート階層について
home.php
・トップページ
404.php
・エラーページ
search.php
・検索結果ページ
検索ワード wordpress テンプレート階層
・全ての元は「index.php」になります。
・そのファイルがない場合は「index.php」になります。
・必要なファイルだけをうまく使ってコンパクトにまとめるのが運用のポイントかと思います。
single.php
・投稿ページ
page.php
・固定ページ
archive.php
・アーカイブ毎のページ
category.php
・カテゴリー別のページ一覧
tag.php
・タグ別のページ一覧
date.php
・日付別のページ一覧
・ワードプレスの独自タグ
使わなくても大丈夫ですがうまく使えると便利です。
テンプレートの使いまわし、サーバー移転には便利です。
条件分岐を使えばより便利です。
2限目
学科 CMS構築基礎②
WordPressのテーマの役割について
サーバー移行で必要なもの
・サーバー契約
・ドメイン名
WordPress移行ができる無料サーバーはもうなくなった😿
・有料レンタルサーバー例
スターサーバー
エックスサーバー
ロリポップ！レンタルサーバー
・ドメイン契約でサーバー使える
スタードメイン
・WordPress のテーマファイルは zip 型式の圧縮ファイルであり WordPress にテーマファイルのアップロードを行う時は、zip 型式のままでアップロードします。
・テーマファイルに格納される主要ファイル
◎制御ファイル
style.cssテーマ情報を記述
functions.phpテーマの機能やショートコードを記述
例：アイキャッチが使えないテーマではアイキャッチ選択画面を出ないようにするなど
screenshot.pngテーマ選択画面で使用するサムネイル画像
◎ページ共通のテンプレートファイル（各ページで共通に使用される部品）
header.phpページ共通のヘッダーテンプレート
例：ヘッダーのロゴを更新したい→ここを変えればヘッダー全ページ変わる
footer.phpページ共通のフッターテンプレート
sidebar.phpページ共通のサイドバーテンプレート
◎ページ個別のテンプレートファイル（ページの種別によって命名ルール有り）
front-page.phpトップページ用テンプレート
page.php固定ページ用テンプレート
single.php記事用テンプレート
category.phpカテゴリーの一覧（アーカイブ）表示用テンプレート
author.php投稿者ごとの一覧（アーカイブ）表示用テンプレート
index.phpブログ記事の一覧（アーカイブ）表示用テンプレート
date.php年間、月間の記事一覧（アーカイブ表示用テンプレート
tag.phpタグの記事一覧（アーカイブ）表示用テンプレート
404.php 404（ページが存在しない）テンプレートsearch.php検索結果表示用テンプレート
・テーマ情報（style.css）
コメントとして書く
/*
Theme Name: テーマ名（必須）
Description: テーマの説明
Author: テーマ作成者の名前
Version: テーマのバージョン
*/
・テーマ機能（functions.php）
テーマが提供する機能を記載します。
・サムネイル画像（screenshot.png）
テーマ選択画面で使用するサムネイル画像です。 下部に WordPress がテーマの状態を示す情報をオーバレイしますので隙間を空けるなどの考慮をしてください。ファイル名screenshot.pngファイル形式PNGサイズ横 880px x 縦 660px
3限目
学科 CMS構築基礎②
課題作成
①テーマのもととなるサイトを作成
css,imagesをコピー
テーマのサムネを作るscreenshot.png 横 880px x 縦 660px
②function.php作る
とりあえず空でもOK
③ページ共通ヘッダーテンプレート（header.php）の作成
元となる HTML ファイルから各ページで共通に使用するヘッダー部を切り出して header.php を作成します。
④ページ共通フッターテンプレート（footer.php）の作成
元となる HTML ファイルから各ページで共通に使用するフッター部を切り出して footer.php を作成します。
・WordPressパス
→絶対パスで指定する必要がある
呼び出すコードを書くとよい
ドメイン名
.co.jp日本ではちゃんとした会社に見える
.com世界で見ても信用できる
⑤トップページテンプレート（index.php）の作成
元となる HTML ファイル（index.html）からヘッダー部とフッダー部を削除し index.php を作成します。
<?php get_header(); ?>
<?php get_footer(); ?>
を前後に入れて共通部分を呼び出せるようにする
⑥固定ページテンプレート（page-jirou.php）の作成
元となる HTML ファイル（jirou.html）からヘッダー部とフッダー部を削除し page-jirou.php を作成します。
⑦テーマファイル（zip ファイル）の作成
作成したファイル群を使用してテーマファイル（theme-sample.zip）を作成します。
⑧ WordPress ダッシュボードでテーマのインストールと有効化
WordPress のダッシュボードにログインして作成したテーマ（theme-sample.zip）のインストールと有効化を行います。
⑨WordPress ダッシュボードで固定ページの定義固定ページ（山田次郎の自己紹介）を表示させるために WordPress のダッシュボードで固定ページの作成を行います。 ページの内容は、記入不要ですがスラッグは、jirou と設定します。
⑩ サイトの表示確認
WordPress サイトを表示して表示内容を確認します。
↑クラシックテーマのやり方
WordPressではクラシックテーマとブロックテーマがあり、
最近はブロックテーマも少しずつ増えてきている。
4限目
学科 CMS構築基礎②
課題作成
5限目
学科 CMS構築基礎②
課題作成
本日のテーマ
WordPressのテーマの仕組みを確認しましょう。
本日の課題
提出課題はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。
今日学んだこと
サーバー移行について
WordPressでのテーマ作成概要
感想
本日は今後のポートフォリオサイト移行に向けてのサーバー移行についてとWordPressのテーマ作成を学びました。
サーバーについては知識がなかったのですが、会社によって値段や容量など少しずつ違うことが分かりました。
ワードプレスを移行できる無料のサーバーは無くなったとのことでサーバーへお金をかける時代になっているんだなと悲しみも感じました。