WordPress/Customize
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*WordPress
テーマのカスタマイズ
//[[Introduction>WordPress]] | [[Basics>WordPress/Basics]...
~
テーマ、すなわちページの雛形となる構成ファイルは、テーマ...
[ wordpressのフォルダ ] / wp-content / themes / [ テーマ...
~
-''おすすめのテーマ''
いずれもライセンスGPLのオープンソースです。ダウンロードし...
--BOYO：https://blogonyourown.com/themes/
--Cocoon：https://wp-cocoon.com/
--Lightning：https://lightning.nagoya/ja/
--Fukasawa：https://andersnoren.se/teman/fukasawa-wordpre...
~
***CONTENTS
#contents2_1
~
~
**テーマを構成するファイル
はじめに、テーマを構成するファイルとその役割について確認...
~
***基本となるファイルとその役割
WordPressでは、index.php を基本として、そこへヘッダー部分...
-''index.php'' ページの中核（必須 ）
&small(これが header.php, sidebar.php, footer.php を呼び...
-header.php ヘッダのテンプレート
-sidebar.php サイドバーのテンプレート
-footer.php フッターのテンプレート
-''style.css'' スタイルシート（必須）
一からテーマを作る場合、とりあえずは index.php と style.c...
~
***あればなお良いファイルとその役割
以下、通常は完備されるテンプレートですが、それが存在しな...
-home.php トップページ（ホーム）専用テンプレート
-archive.php アーカイブ
--category.php カテゴリー
--tag.php タグ
-''single.php'' 投稿ページのテンプレート
-''page.php'' 固定ページのテンプレート
-comments.php コメントのテンプレート
-searchform.php 検索フォームのテンプレート
-search.php 検索結果のテンプレート
-404.php ページがみつかなない場合の対応
-''function.php'' 関数の定義付け（機能の追加）
~
***テンプレート階層
WordPressは、リクエストされたページのURLからページの種類...
以下、公式サイトにある階層図です。
#image(https://developer.wordpress.org/files/2014/10/Scre...
下位層（図の左の方）の個別テンプレートが存在しない場合に...
~
***テーマサンプル
-基本的なファイル構成例
https://github.com/koichi-inoue/WordPress_BasicSample
-最小限のファイル構成例
https://github.com/koichi-inoue/WordPress_MinimalSample
//-DEMO
//https://design.kyusan-u.ac.jp/OpenSquareJP_WP/
~
~
**テンプレートの編集
テーマファイルは、手元のエディタで編集して、FTPでアップロ...
&color(red){以下、仕組みを理解するための「お話」とお考え...
~
***index.php の編集
index.phpでは、get_header()、get_sidebar()、get_footer()...
-WordPressループ
条件にあう記事を順次読み込んで表示するPHPプログラムで、Wo...
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else: ?>
<h2>Not Found</h2>
<?php _e('記事が見つかりませんでした。'); ?>
<?php endif; ?>
このループ構文を記述することで、投稿記事一覧、固定ページ...
-get_XXX()
他のPHPファイルを読み込みます。例えば、get_header(); と書...
~
***header.php の編集
ヘッダーに画像ロゴを掲載するなど、headerブロックに何らか...
~
***footer.php の編集
ヘッダー同様、フッターのカスタマイズには、footer.php を編...
~
***sidebar.php の編集
サイドバー部分も同様、sidebar.php を編集します。カスタム...
~
***style.css の編集
ビジュアルに関することはすべて style.css で管理されていま...
注）部分的な調整であれば ''カスタマイズ＞追加のCSS'' を使...
-1) テンプレートが自動的に出力する Class名等と整合するよ...
-2) style.css の先頭には、以下のような内容を記述するのが...
/*
Theme Name: Rose
Theme URI: テーマのホームサイトの URI
Description: a-brief-description
Author: 作者の名前
Author URI: 作者の URI
Template: 親テーマの定義（オプション）
Version: バージョン番号（オプション）
.
コメント（オプション）
.
*/
~
***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$...
'after_widget' => '</div>',
));
// アイキャッチ画像の有効化
add_theme_support('post-thumbnails');
?>
~
~
**子テーマについて
通常、既存のテーマがアップデートされた場合、その「更新」...
詳細はこちら ＞ [[WordPress/ChildTheme]]
ちなみに、Cocoonというテーマを配布しているサイトでは、子...
-Cocoon：https://wp-cocoon.com/
~
~
**追加CSS｜最も安全な方法
子テーマを作らなくても「追加CSS」だけでもデザインをカスタ...
-「追加CSS」で入力したCSSは ''custom_css'' というカスタム...
-追加のCSSは動的に生成されるHTMLファイルの中で、<head>内...
<style id=”wp-custom-css”></style>
~
~
**補足
***wp_head() と wp_footer() について
WordPressのオリジナルテーマを作る際には、header.php と fo...
これらは存在しなくても、一見何の変化もないため忘れがちで...
header.phpの</head>の直前に、以下の記述が必要です。
<?php wp_head(); ?>
footer.phpの</body>の直前に、以下の記述が必要です。
<?php wp_footer(); ?>
~
***トップページのみ異なるデザインにしたい・・
基本的にはトップページ用のテンプレートである home.php を...
-トップページにだけ表示したい
例えば、header.php の中に以下のように書きます。
<?php if ( is_home() || is_front_page() ) : ?>
ここにトップページにだけ表示したい内容を記載
<?php endif; ?>
~
-トップページ以外に表示したい
例えば、index.phpの中に以下のように書きます。
<?php if ( !is_home() && !is_front_page() ) : ?>
ここにトップページ以外に表示したい内容を記載
<?php endif; ?>
~
***オリジナルの固定ページテンプレートを作るには
例えば、gallery.php などの名称で、オリジナルの表示構造を...
-まず、page.php を複製して、例えば gallery.php にリネーム
-その gallery.php を page.php と同じテーマディレクトリの...
※書き換えができるように[[パーミッション>FilePermission]]...
- gallery.php の冒頭に以下の3行を記載
<?php
/* Template Name: Gallery */
?>
-gallery.php の内容（テンプレートの構造）を書き換える
以上で、準備完了です。あとは、「固定ページの編集」におい...
~
***テンプレートごとにスタイルシートを分けるには
一般に、WordPressのスタイルは、style.css ひとつに書かれて...
<link rel="stylesheet" href="<?php echo get_stylesheet_u...
よって、そこ（style.css）に共通スタイルを書いて、その他、...
<?php
if ( is_page_template('gallery.php') ) {
echo '<link rel="stylesheet" media="screen" href...
} else {
echo '<link rel="stylesheet" media="screen" href...
}
?>
ここで、 is_page_template('gallery.php') というのは、「ペ...
~
***参考サイト（外部リンク）
-日本語WordPressチートシート
https://www.webcreatorbox.com/tech/japanese-wordpress-che...
-WordPressのオリジナルテーマ作成フロー・基本マニュアル
http://kachibito.net/wordpress/theme-development-flow.html
-おそらく最もわかりやすいWordPressテーマ制作チュートリアル
http://stocker.jp/diary/wordpress-tutorial/
-PresentNoteさんのページ（チャイルドテーマについて）
http://presentnote.com/child-theme-customaize/
//-Nori Takahashiさんのサイト
//http://webdesignrecipes.com/category/wordpress/
~
~
~
終了行:
*WordPress
テーマのカスタマイズ
//[[Introduction>WordPress]] | [[Basics>WordPress/Basics]...
~
テーマ、すなわちページの雛形となる構成ファイルは、テーマ...
[ wordpressのフォルダ ] / wp-content / themes / [ テーマ...
~
-''おすすめのテーマ''
いずれもライセンスGPLのオープンソースです。ダウンロードし...
--BOYO：https://blogonyourown.com/themes/
--Cocoon：https://wp-cocoon.com/
--Lightning：https://lightning.nagoya/ja/
--Fukasawa：https://andersnoren.se/teman/fukasawa-wordpre...
~
***CONTENTS
#contents2_1
~
~
**テーマを構成するファイル
はじめに、テーマを構成するファイルとその役割について確認...
~
***基本となるファイルとその役割
WordPressでは、index.php を基本として、そこへヘッダー部分...
-''index.php'' ページの中核（必須 ）
&small(これが header.php, sidebar.php, footer.php を呼び...
-header.php ヘッダのテンプレート
-sidebar.php サイドバーのテンプレート
-footer.php フッターのテンプレート
-''style.css'' スタイルシート（必須）
一からテーマを作る場合、とりあえずは index.php と style.c...
~
***あればなお良いファイルとその役割
以下、通常は完備されるテンプレートですが、それが存在しな...
-home.php トップページ（ホーム）専用テンプレート
-archive.php アーカイブ
--category.php カテゴリー
--tag.php タグ
-''single.php'' 投稿ページのテンプレート
-''page.php'' 固定ページのテンプレート
-comments.php コメントのテンプレート
-searchform.php 検索フォームのテンプレート
-search.php 検索結果のテンプレート
-404.php ページがみつかなない場合の対応
-''function.php'' 関数の定義付け（機能の追加）
~
***テンプレート階層
WordPressは、リクエストされたページのURLからページの種類...
以下、公式サイトにある階層図です。
#image(https://developer.wordpress.org/files/2014/10/Scre...
下位層（図の左の方）の個別テンプレートが存在しない場合に...
~
***テーマサンプル
-基本的なファイル構成例
https://github.com/koichi-inoue/WordPress_BasicSample
-最小限のファイル構成例
https://github.com/koichi-inoue/WordPress_MinimalSample
//-DEMO
//https://design.kyusan-u.ac.jp/OpenSquareJP_WP/
~
~
**テンプレートの編集
テーマファイルは、手元のエディタで編集して、FTPでアップロ...
&color(red){以下、仕組みを理解するための「お話」とお考え...
~
***index.php の編集
index.phpでは、get_header()、get_sidebar()、get_footer()...
-WordPressループ
条件にあう記事を順次読み込んで表示するPHPプログラムで、Wo...
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else: ?>
<h2>Not Found</h2>
<?php _e('記事が見つかりませんでした。'); ?>
<?php endif; ?>
このループ構文を記述することで、投稿記事一覧、固定ページ...
-get_XXX()
他のPHPファイルを読み込みます。例えば、get_header(); と書...
~
***header.php の編集
ヘッダーに画像ロゴを掲載するなど、headerブロックに何らか...
~
***footer.php の編集
ヘッダー同様、フッターのカスタマイズには、footer.php を編...
~
***sidebar.php の編集
サイドバー部分も同様、sidebar.php を編集します。カスタム...
~
***style.css の編集
ビジュアルに関することはすべて style.css で管理されていま...
注）部分的な調整であれば ''カスタマイズ＞追加のCSS'' を使...
-1) テンプレートが自動的に出力する Class名等と整合するよ...
-2) style.css の先頭には、以下のような内容を記述するのが...
/*
Theme Name: Rose
Theme URI: テーマのホームサイトの URI
Description: a-brief-description
Author: 作者の名前
Author URI: 作者の URI
Template: 親テーマの定義（オプション）
Version: バージョン番号（オプション）
.
コメント（オプション）
.
*/
~
***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$...
'after_widget' => '</div>',
));
// アイキャッチ画像の有効化
add_theme_support('post-thumbnails');
?>
~
~
**子テーマについて
通常、既存のテーマがアップデートされた場合、その「更新」...
詳細はこちら ＞ [[WordPress/ChildTheme]]
ちなみに、Cocoonというテーマを配布しているサイトでは、子...
-Cocoon：https://wp-cocoon.com/
~
~
**追加CSS｜最も安全な方法
子テーマを作らなくても「追加CSS」だけでもデザインをカスタ...
-「追加CSS」で入力したCSSは ''custom_css'' というカスタム...
-追加のCSSは動的に生成されるHTMLファイルの中で、<head>内...
<style id=”wp-custom-css”></style>
~
~
**補足
***wp_head() と wp_footer() について
WordPressのオリジナルテーマを作る際には、header.php と fo...
これらは存在しなくても、一見何の変化もないため忘れがちで...
header.phpの</head>の直前に、以下の記述が必要です。
<?php wp_head(); ?>
footer.phpの</body>の直前に、以下の記述が必要です。
<?php wp_footer(); ?>
~
***トップページのみ異なるデザインにしたい・・
基本的にはトップページ用のテンプレートである home.php を...
-トップページにだけ表示したい
例えば、header.php の中に以下のように書きます。
<?php if ( is_home() || is_front_page() ) : ?>
ここにトップページにだけ表示したい内容を記載
<?php endif; ?>
~
-トップページ以外に表示したい
例えば、index.phpの中に以下のように書きます。
<?php if ( !is_home() && !is_front_page() ) : ?>
ここにトップページ以外に表示したい内容を記載
<?php endif; ?>
~
***オリジナルの固定ページテンプレートを作るには
例えば、gallery.php などの名称で、オリジナルの表示構造を...
-まず、page.php を複製して、例えば gallery.php にリネーム
-その gallery.php を page.php と同じテーマディレクトリの...
※書き換えができるように[[パーミッション>FilePermission]]...
- gallery.php の冒頭に以下の3行を記載
<?php
/* Template Name: Gallery */
?>
-gallery.php の内容（テンプレートの構造）を書き換える
以上で、準備完了です。あとは、「固定ページの編集」におい...
~
***テンプレートごとにスタイルシートを分けるには
一般に、WordPressのスタイルは、style.css ひとつに書かれて...
<link rel="stylesheet" href="<?php echo get_stylesheet_u...
よって、そこ（style.css）に共通スタイルを書いて、その他、...
<?php
if ( is_page_template('gallery.php') ) {
echo '<link rel="stylesheet" media="screen" href...
} else {
echo '<link rel="stylesheet" media="screen" href...
}
?>
ここで、 is_page_template('gallery.php') というのは、「ペ...
~
***参考サイト（外部リンク）
-日本語WordPressチートシート
https://www.webcreatorbox.com/tech/japanese-wordpress-che...
-WordPressのオリジナルテーマ作成フロー・基本マニュアル
http://kachibito.net/wordpress/theme-development-flow.html
-おそらく最もわかりやすいWordPressテーマ制作チュートリアル
http://stocker.jp/diary/wordpress-tutorial/
-PresentNoteさんのページ（チャイルドテーマについて）
http://presentnote.com/child-theme-customaize/
//-Nori Takahashiさんのサイト
//http://webdesignrecipes.com/category/wordpress/
~
~
~
ページ名:
