学科 CMS構築基礎②【オンライン】

訓練日誌

1限目
学科 CMS構築基礎②
WordPressのテーマについて

2限目
学科 CMS構築基礎②
WordPressのテーマの役割について

3限目
学科 CMS構築基礎②
サーバー準備について

4限目
学科 CMS構築基礎②
課題作成

5限目
学科 CMS構築基礎②
課題作成


本日のテーマ

WordPressのテーマの仕組みを確認しましょう。

WordPressについて

WordPress(ワードプレス)は、ブログやサイト(ホームページ)を作成できるソフトです。今や、世界中のサイトの約3分の1はWordPressで作られていると言われています。日本国内でも、個人ブログだけでなく、企業や公共機関のサイトなどに幅広く利用されています。

WordPressのテーマとは

WordPressのテーマは、Webサイトのデザインを決定するものですが、デザインに加えてサイト全体の構成や表示される機能にも影響します。単純に見た目のデザインだけで選ぶと操作がしにくかったりメンテナンスが大変だったりする場合もあります。
テーマの入手方法は、以下の種類があります。無料のテーマの中には、機能制限有りが無料で制限を解除する場合は、有料になる場合もあります。

  • 無料のテーマ(WordPress公式テーマ)
  • 無料のテーマ(WordPress非公式テーマ)
  • 有料のテーマ
  • 制作会社に発注
  • 自分で作成

テーマのついて仕組みを学んで行きましょう!
また、オリジナルテーマ作成に必要な
内容を把握していきましょう。

インストールされている場所について

まずは、ファイル階層の位置関係を把握しておきましょう。


ギュ!っとした説明です。
・使いまわしの効率を上げるのには、出来るだけ「themes」にまとめておきましょう。
・逆に、お客さんに編集をさせたくない場合は、これ以外の場所にファイルを作成してみましょう。
・ファイル名の重複がおこりやすいので、管理とバックアップは要注意!


FTPのWordPressをインストールした階層より /wp-content/themes/


PHPの基本的な作法として

「」 がphpの基本構文です。 プログラムの終了には必ずセミコロン「;」になります。 拡張子は、「.php」になります。

ギュ!っとした説明です。

・wordpressはphpを基本として作られています。 ・動的プログラム、サーバサイドプログラム「php」を使って利用しています。 ・サーバサイドプログラムなので「Javascript」と違いブラウザでコードを確認出来ません。


必要最低限の構造として

index.php style.css

全てのテンプレート階層の元になる テーマの情報を入力する場所

テーマの情報を入力する場所


ギュ!っとした説明です。


◇ screenshot.png(gif jpg)
・管理画面のテーマの画像になる
・最低限の構造として「index.php」と「style.css」があればwordpressは成立します。
・立ち上げ準備中やサイト移転の状態であればこれでもよいかもしれません。
・「index.php」の注意点はこのファイル名は重複する可能性が高いので管理に気を付けましょう。


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 」だけです。


インクルードを活用する方法

インクルードのタグ及びファイル

ギュ!っとした説明です。

Sampleの部分をファイル名に変更します。 ・header.php ・footer.php ・sidebar.php 検索ワード wordpress インクルード 自作テンプレート(例:sample.php) ・共通部分のファイルは決められているファイル名になります。 ・それ以外のファイル名を使用したい場合は自作テンプレートを利用してみてください。 ・タグだけあって、使わない場合は「デフォルト」の内容が表示されます。


本日の課題

提出課題はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。

コメント

タイトルとURLをコピーしました