LogoMark.png

情報デザイン演習IIIA/2020/1210

第13回 WPテーマのカスタマイズ

情報デザイン演習IIIA/2020|情報デザイン専攻|2020.12.10遠隔
情報共有シートプロジェクト一覧学科サイト

AGENDA


以下、LIVE動画をご覧下さい。記事に沿って解説しています。
解説動画は学科サイトの/限定ページに移動しました。



本日のメニュー




はじめに|次回成果報告について

福岡の感染拡大状況にもよりますが、次回12月17日(木)は、今のところ予定通り「教室対面にて成果報告」です。前回同様に前半・後半のグループに分けて行いますので。以下のシートで、事前に出校時間を確認しておいて下さい。
プロジェクト一覧



テンプレートの編集

WordPressのテーマファイル(外観設定)は、手元のエディタで編集して、FTPでアップロードするのが一般的な方法ですが、WordPressでは、ダッシュボードメニューの 外観 > テーマ編集 からブラウザ上で直接編集することも可能です。

以下、仕組みを理解するための「お話」とお考え下さい。実際には、既存のテーマファイルを直接編集するのは危険なので、後述の「子テーマ」を作ってカスタマイズする、あるいは「追加CSS」に上書きしたいスタイルを記述する・・というのが一般的です


サンプルテーマ

以下の基本的なファイル構成例を前提に解説します。
https://github.com/koichi-inoue/WordPress_BasicSample

index.php の編集

index.phpでは、get_header()、get_sidebar()、get_footer()によって、ページのパーツを読み込むとともに、WordPressループによる記事の読み込みを行なって、ページ全体を完成させています。 

header.php の編集

ヘッダーにロゴ画像を掲載したい場合など、headerブロックに何らかの構造的操作を加える必要がある場合は、header.php を開いて、画像を置くための IMGタグを、HTMLあるいはPHPとして記述する・・・ということになります。

footer.php の編集

ヘッダー同様、フッターのカスタマイズには、footer.php を編集します。

sidebar.php の編集

サイドバー部分も同様、sidebar.php を編集します。カスタムウィジェットが置かれていない場合に、デフォルトで表示する要素などを記述します。

style.css の編集

ビジュアルに関することはすべて style.css で管理されています。通常のスタイルシートと同様に、ページ内のセレクタに対応するスタイル記述を編集することでカスタマイズできます。

注)部分的な調整であれば カスタマイズ>追加のCSS を使うのが無難です。

/*   
Theme Name: Rose
Theme URI: テーマのホームサイトの URI
Description: a-brief-description
Author: 作者の名前
Author URI: 作者の URI
Template: 親テーマの定義(オプション)
Version: バージョン番号(オプション)
.
コメント(オプション)
.
*/


function.php について

サイト内の機能追加の際に必要になるファイルです。基本的な投稿表示はデフォルトのままで動作しますが、カスタムメニューやサイドバーを追加するには、それが機能するように function.php に記載する必要があります。以下、機能追加の事例をソースコードそのまま・・で紹介します。

<?php

  // メインカラム幅|これが定義されていると画像アップの際に最適化される
  if ( ! isset( $content_width ) ) $content_width = 576;

  // カスタムメニュー ON
  add_theme_support('menus');

  register_nav_menus( array(
    'header-navi' => 'ヘッダーのナビゲーション',
    'footer-navi' => 'フッターのナビゲーション',
  ));

  // ダイナミックサイドバー
  register_sidebar( array(
    'name' => 'サイドバーウィジェット01',
    'id' => 'sidebar-1',
    'description' => 'サイドバーのウィジェットエリア(デフォルトのサイドバーと入れ替える場合に使用)',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget' => '</div>',
  ));

  // アイキャッチ画像の有効化
  add_theme_support('post-thumbnails');

?>




子テーマについて

通常、既存のテーマがアップデートされた場合、その「更新」を行うと、あなたが編集した部分も含めて、すべて新しいファイルで上書きされてしまいます。そこで、実際のテーマのカスタマイズでは「子テーマ」というものを作って、それをカスタマイズするのが一般的です。子テーマを編集する方法をとれば、テーマの更新があっても、独自編集した部分は影響を受けません。

詳細はこちら > WordPress/ChildTheme

ちなみに、Cocoonというテーマを配布しているサイトでは、子テーマも含めてダウンロードして利用するよう、推奨しています。

追加CSS|最も安全な方法

子テーマを作らなくても「追加CSS」だけでもデザインをカスタマイズすることが可能です。部分的な変更のみで構わない場合は、この方法が最も無難です。

補足

wp_head() と wp_footer() について

WordPressのオリジナルテーマを作る際には、header.php と footer.phpの中にそれぞれ「wp_head()」と「wp_footer()」という関数を記述する必要があります。

これらは存在しなくても、一見何の変化もないため忘れがちですが、プラグインの動作に必要なので、欠かせません。wp_head()は、通常バージョン情報等をmetaタグ表示するのに機能していますが、事前に登録したjavascriptメソッドなどを呼び出す機能もあります。wp_footer()も同様、javascriptが書いてあったりするので、欠かせません。

header.phpの</head>の直前に、以下の記述が必要です。

<?php wp_head(); ?>

footer.phpの</body>の直前に、以下の記述が必要です。

<?php wp_footer(); ?>


トップページのみ異なるデザインにしたい・・

基本的にはトップページ用のテンプレートである home.php を別に作ればよいのですが、テンプレートを増やしたくない場合は、既存のテンプレートファイルに対して以下のような記述を行うことで、例外的な表示が可能です。

オリジナルの固定ページテンプレートを作るには

例えば、gallery.php などの名称で、オリジナルの表示構造をもつテンプレートを作りたい場合は、以下の手順で作業します。

以上で、準備完了です。あとは、「固定ページの編集」において、テンプレートの選択から Gallery を選べば、当該固定ページは、gallery.php をテンプレートとして出力されます。当然ですが、Galleryテンプレートは複数の固定ページで利用できます。

テンプレートごとにスタイルシートを分けるには

一般に、WordPressのスタイルは、style.css ひとつに書かれています(必須)。 header.php では以下のように書かれて読み込まれています。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"/>

よって、そこ(style.css)に共通スタイルを書いて、その他、ページごとに異なるスタイルについては、header.php に以下のように書くことで分岐させればよい・・・ということになります。

<?php
    if ( is_page_template('gallery.php') ) {
        echo '<link rel="stylesheet" media="screen" href="'. get_stylesheet_directory_uri(). '/gallery.css" />';
    } else {
        echo '<link rel="stylesheet" media="screen" href="'. get_stylesheet_directory_uri(). '/main.css" />';
    } 
?>

ここで、 is_page_template('gallery.php') というのは、「ページテンプレートとしてgallery.phpが使用されている場合は・・・」という条件を意味します。同様の振り分け方として、is_page( 'gallery' ) と書いた場合は、「galleryという名前のスラッグを持つページの場合は…」というような方法で、スタイルを振り分けることもできます。

参考サイト(外部リンク)

学科サイトの更新|次回成果発表に備えて

次回、成果発表では、テーマ、背景・目的・・・とプロジェクトの概要の部分を順にプレゼンテーションしていただきます。これに備えて、プロジェクトのページの情報を最適化しておいて下さい。





PAGES

GUIDE

DATA

Last-modified: 2020-12-10 (木) 11:48:20