作成日：2021/04/12　更新日：2022/08/29

#1 CMSについて

CMSとフレームワーク

CMS（Contents Management Systemコンテンツマネジメントシステム）とは、Webページなどのコンテンツを管理し、htmlを書かなくても文字や画像の挿入や、ページの追加などができるシステムです。仕組みとしては、あらかじめWebページ(html)内に追加変更したい部分を決めてPHPで記述しておきその部分に、データベースで保存・管理しているデータをつかって表示またはデータの変更を行います。
簡単に言えば「ホームページ」を作るための機能を一式取り揃えている「完成品」のイメージです。そこにユーザー独自のデザインを反映させていきます。

有名なCMS

　WordPressワードプレス
　Joomla!ジュームラ
　Drupal *ドルーパル
　Magentoマジェント
　*Drupalはフレームワークという認識もあります。

似たようなものとして「フレームワーク（Webアプリケーションフレームワーク）」というものがありますが、 CMSより自由度が高く複雑になっており学習コストも高くなります。会員登録機能や管理者の役割などを制御するアプリケーションにとって必要な機能を「ライブラリ群」として持っており、それらの道具を組み合わせて作っていきます。

有名なフレームワーク

(Ruby)
　Ruby on Railsルビーオンレイルズ
(Java)
　Strutsストラッツ
　Java EEジャバ EE
　Springスプリング
(PHP)
　Lalavelララベル
　CakePHPケイクPHP
　Symfonyシンフォニー
(Python)
　Djangoジャンゴ

#2 WordPressのインストールと初期設定

WordPressのインストール

CMSの定番であるWordPressをインストールしてみましょう。
※2022年8月にバージョン6で説明いたします。

WordPressダウンロードサイトへ

ダウンロードをしたら解凍します。
解答したらstgフォルダに入れ、仮に80003-WordPressとリネームします。

次にブラウザで管理画面に入り手順通りにインストールを進めます。インストールすると、自動的にデータベースのテーブルを作成します。

▼ブラウザでの設定方法


Listen 8003
<virtualhost *:8003>
  DocumentRoot "/Users/ユーザー名/job/stg/8003-cbc-wp/"
</virtualhost>

MAMPのhttpd-vhosts.confを編集してブラウザでアクセスできるように設定します。MAMPを再起動します。

↓

↓

↓

↓

↓

↓

WordPressの初期設定

左上のブログ名（テストブログ）をマウスオーバーして「サイトを表示」をクリックすると、Webサイトにリンクします。

特に無味乾燥なテーマでコンテンツが表示されています。
サイトの上部に管理ツールバーが出ていますので、非表示にします。

▼ツールバーの消し方

#3 独自テーマを作る

テーマを入れるフォルダ

wp-content > themes（テーマ） > 自分で考えたテーマ名　となります。同じ階層には予め用意されているテーマや新たにダウンロードしたテーマなども入ります。
今回はcbcrestaurantにしてください。
この中に、テーマを作る上で最低限必要なファイルとして、

・functions.php *
・index.php
・style.css *
・screenshot.jpg
・/assets/

を作成し、画像やcssファイルを入れるためのフォルダとして、[assets]フォルダを作成していきます。
*は必須ファイルです。

htmlサイトをWordPressに移植する

以前作った架空のレストランサイトのscss化したデータがあると思います。
基礎1 #8で作成したレストランサイトのデータをWordPressに移植しCMS化してみましょう。
データがない場合はこちらからダンロードしてください。

新しく作る場合はフォルダ名cbcrestaurantを作成し、データを全てコピーしてみましょう。
その後新たに、functions.phpとstyle.cssというファイルを用意します。（cssフォルダ内のstyle.cssとは別のものです）
また、css、img、scssフォルダはassetsフォルダに入れておきましょう。

①functions.php作成


<?php
/**
 * CBC restaurant
 *
 */

functions.phpには、独自関数などのサイトの設定を記述していきますが、いまはひとまずコメントのみです。
また今後は、ファイル全体がphpのみの場合（html記述がない場合）は、綴じカッコ ?> を記載しないでください。

②style.css作成


/*
Theme Name: CBC restaurant
Theme URI: https://cbc-study.com/
Description: WordPressで作ったはじめてのテーマ
Version: 1.0
Author: Shimokita Taro
*/

style.cssは、cssフォルダ内のstyle.cssとは別に必要となります。
テーマ名が必須項目です。このファイルにcssを記述しても良いですが、今回は別途cssフォルダを用意してファイルを管理します。
以下の内容が書類の最初にコメントとして必要になります。

/*
Theme Name: テーマの名前を決めます
Theme URI: サイトのURLをいれます
Description: 説明文を入れます
Version: バージョンを入れます
Author: 開発者の名前を入れる
*/

#4 共通部分のテンプレート化

headerやfooter、sidebarなど、どのページでも使用する共通の項目を部品化モジュールにしてどのページでも使い回せるようにしておきます。
今回の例ではheaderとfooter部分をモジュール化してみましょう。
テンプレートはheader.phpというようにphpファイルとなります。

header.php


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » <?php } ?> <?php wp_title(); ?></title>
  
<?php wp_head(); ?>
</head>
<body>

  <header class="header">
    <ul class="header__sns">
      <li>
        <a href="#">
          <img src="<?php echo get_template_directory_uri(); ?>/assets/img/sns01.png" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="<?php echo get_template_directory_uri(); ?>/assets/img/sns02.png" alt="">
        </a>
      </li>
    </ul>
    <ul class="header__navi">
      <li><a href="<?php echo get_permalink(0); ?>">PHILOSOPHY</a></li>
      <li><a href="<?php echo get_permalink(0); ?>">NEWS</a></li>
      <li><a href="<?php echo get_permalink(0); ?>">MENU</a></li>
      <li><a href="<?php echo get_permalink(0); ?>">ACCESS</a></li>
      <li><a href="<?php echo get_permalink(0); ?>">CONTACT</a></li>
    </ul>
  </header>

まず過去に作成したindex.htmlの<!DOCTYPE html>から</header>までをコピーして新規ファイルにペーストしheader.phpという名前で保存しましょう。

WordPressになったことで各ファイルが置いてあるディレクトリの階層が変更になります。
リンク部分をテンプレートタグと呼ばれるWordPressの独自関数である get_permalink(n)関数でファイルパスを指定します。 get_permalink(0)の引数の数字は、記事ページ一つ一つに振られているIDを指定します。※引数にはひとまず0を入れています

get_template_directory_uri()は選択しているテーマ名、ここではcbcrestaurantディレクトリを示します。
この関数を使うと、/assets/imgディレクトリまでのパスhttp://localhost:8003/wp-content/themes/cbcrestaurant/というパスが自動で取得できます。
bloginfo('name')で、ワードプレス管理画面で設定したblog名が入ります。
wp_head()は、ワードプレスが設定しているhead情報が自動的に挿入されます。

functions.php

CSSやJavaScriptファイルは、headerやfooterに書かずに、以下のようにfunctions.phpに記述します。


/**
 *
 * cssとjsを読み込む設定
**/
function add_css_js() {
  /*cssファイルの読み込み*/
  wp_enqueue_style('reset', get_template_directory_uri().'/assets/css/reset.css');
  wp_enqueue_style('style', get_template_directory_uri().'/assets/css/style.css', array('reset'), false, all);

  /* 外部ファイルの場合 */
  wp_enqueue_style('notosans', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

  /*jsファイルの読み込み*/
  wp_enqueue_script('main', get_template_directory_uri().'/assets/js/main.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'add_css_js');

関数add_css_jsを設定し、add_actionでタイミングwp_enqueue_scriptsでファイルを読み込ませるときにこの関数を実行します。
functions.php内でmain.jsファイルを読み込む設定は以下のとおりです。


wp_enqueue_style(    /* enqueue: エンキュー（キュー（待ち列）に入れる） */
  'style',           /* スタイルの名前 */
  get_template_directory_uri() . '/assets/css/style.css',  /*ファイルの場所 */
  array(),           /* このファイルを読み込む前に読み込みたいファイル名 */
  false,             /* バージョン指定したいとき */
  all                /* media属性タグの値を指定 */
);

CSSファイルの場合


wp_enqueue_script(
  'main',            /* スクリプトの名前 */
  get_template_directory_uri() . '/assets/js/main.js',  /*ファイルの場所 */
  array(),           /* このファイルを読み込む前に読み込みたいファイル名 */
  false,             /* バージョン指定したいとき */
  true               /* footerで読み込みたいとき */
);

JavaScriptファイルの場合

WP関数のwp_enqueue_script()の中にある、enqueueエンキューの意味は、キューqueue（待ち列）に`入れる``登録する`enという意味です。
jsファイルやcssファイルを読み込ませるための関数で、cssファイルの場合はwp_enqueue_style()という関数があります。
ファイルは直接<head>タグ内に記入しても良さそうですが、このようにfunctions.php にアクションフックさせることで安全にファイルを読み込ませることができるのでWPでは推奨されている書き方です。アクション内add_actionのフック名はwp_enqueue_scriptsと`s`がつくので気をつけましょう。

footer.php


<?php wp_footer(); ?>

<footer class="footer">
 <div class="footer__inner">
  <ul class="footer__inner-navi">
   <li><a href="<?php echo get_permalink(0); ?>">PHILOSOPHY</a></li>
   <li><a href="<?php echo get_permalink(0); ?>">NEWS</a></li>
   <li><a href="<?php echo get_permalink(0); ?>">MENU</a></li>
   <li><a href="<?php echo get_permalink(0); ?>">CONTACT</a></li>
  </ul>
  <div class="footer__inner-sns">
   <ul>
    <li>
     <a href="＃">
      <img src="<?php echo get_template_directory_uri(); ?>/assets/img/sns01.png" alt="">
     </a>
    </li>
    <li>
     <a href="＃">
      <img src="<?php echo get_template_directory_uri(); ?>/assets/img/sns02.png" alt="">
     </a>
    </li>
   </ul>
   <div class="copyright">© 2019 CRI Inc</div>
  </div>
 </div>
</footer>

</body>
</html>

footer.phpを作成し、上記の内容を入れましょう。
<?php wp_footer(); ?>は</body>直前に入れたい、ワードプレスが設定している情報が挿入されます。

▼ WordPress独自関数の一部
<?php bloginfo('name'); ?>　　管理画面 > 一般設定で設定した"サイトのタイトル"が出力されます。
<?php wp_title(); ?>　　投稿記事のタイトルが出力されます。
<?php echo get_template_directory_uri(); ?>　　テーマのディレクトリを表示します。
<?php echo get_permalink(数字); ?>　　投稿ページへのリンクを表示します。
他にもたくさんありますので、必要なときに覚えましょう。WordPress Codex日本語版

#5 TOPページを作る

WordPressでTOPページを作りましょう。
まずindex.htmlをコピーしindex.phpという名前のファイルを作ります。
index.phpのheader部分とfooter部分に、テンプレートheader.phpとfooter.phpを読み込ませます。

読み込み方としては、get_***()関数（テンプレートタグ）を使ってモジュールを読み込みます。
get_header()関数はheader.phpを読み込むために用意されたWordPressの独自関数となります。


/* ↓header.phpに記述した部分
 * <!DOCTYPE html> から </header>タグまで
 * を削除して、以下を追記
 */
<?php get_header(); ?>

 <section class="lgoo">
　  <h1><img src="<?php echo get_template_directory_uri(); ?>/assets/img/cbc_logo_white.svg" alt=""></h1>
 </section>
  ・
  ・
  ・
  ・
  <section class="access">

  </section>

/* ↓footer.phpに記述した部分
 * <footer class="footer"> から </html>タグまで
 * を削除して、以下を追記
 */
<?php get_footer(); ?>

⑥テーマのスクリーンショットを作成

スクリーンショットなどを使って管理画面で見たときのテーマのサムネイル画像を作成します。
こちらの画像をダウンロードしscreenshot.pngという名前でテンプレートフォルダ内直下に入れます。

⑦テーマの変更

管理画面の外観 > テーマと進むと、作成した新しいテーマが表示されています。
作ったテーマを有効化させましょう。
※表示されない場合は、必要なファイルが入っているか、ファイル名が正しく記述されているかなどを確認しましょう。

結果

小テスト

index.phpのheader以降のコンテンツにある画像リンク箇所に、header.phpで使ったようなWordPressの独自関数を使って、すべての画像が表示されるようにしてください。
悩んだときは、header.phpでcssディレクトリを示すために使った関数を思い出してみましょう。

次のページ ▶

作成日：2021/04/12 更新日：2022/08/29

#1 CMSについて

CMSとフレームワーク

有名なCMS

有名なフレームワーク

#2 WordPressのインストールと初期設定

WordPressのインストール

WordPressの初期設定

#3 独自テーマを作る

テーマを入れるフォルダ

htmlサイトをWordPressに移植する

①functions.php作成

②style.css作成

#4 共通部分のテンプレート化

header.php

functions.php

footer.php

#5 TOPページを作る

⑥テーマのスクリーンショットを作成

⑦テーマの変更

結果

小テスト

入門1（コーダー初級）

入門2（コーダー中級）

入門3（コーダー上級）

基礎1（マークアップ 初級）

基礎2（マークアップ 中級）

基礎3（マークアップ 上級）

応用1（フロントエンドエンジニア 初級）

応用2（フロントエンドエンジニア 中級1）

応用3（フロントエンドエンジニア 中級2）

実践1（フロントエンジニア 中級3）

実践2（フロントエンドエンジニア 中級4）

実践3（フロントエンドエンジニア 上級1）

実践3（バックエンド Laravel）

入門（デザイン概論）

基礎（デザイン実践）

応用（クリエイティブ）

Kids タイピングゲーム

Kids Scratch基礎

Kids Webサイト制作

作成日：2021/04/12　更新日：2022/08/29

基礎1（マークアップ初級）

基礎2（マークアップ中級）

基礎3（マークアップ上級）

応用1（フロントエンドエンジニア初級）

応用2（フロントエンドエンジニア中級1）

応用3（フロントエンドエンジニア中級2）

実践1（フロントエンジニア中級3）

実践2（フロントエンドエンジニア中級4）

実践3（フロントエンドエンジニア上級1）