狠狠撸

狠狠撸Share a Scribd company logo
松戸WordPress部
2015年5月20日
はじめてのカスタマイズ
Unsplash
https://unsplash.com/
名前 三柴 誠一郎
出身 愛媛県
拠点 千葉県松戸市
趣味 カメラ、 旅、 料理、 滝めぐり、 ダムめぐり、 城めぐり
特徴 絶望的に方向音痴
自己紹介 高知城(鷹城)
彦根城(金亀城)
経歴
 1996年にIT会社へ入社。業務システムの企画?構築?運用等の
 経験を経て2014年からフリーランスとして活動中。
活動
 松戸でWordPressに関するセミナーを運営
  【Facebook】 https://www.facebook.com/groups/wordpress.banana.cluster/
  【Doorkeeper】 https://wpmatsudo.doorkeeper.jp/
経歴?活動
①本日出てくるおもな用语
②ハンズオン
I.子テーマの作成
II.サイトフロントページのカスタマイズ
III.各自でカスタマイズ + 質疑応答
本日の流れ
①本日出てくるおもな用语
②ハンズオン
I.子テーマの作成
II.サイトフロントページのカスタマイズ
III.各自でカスタマイズ + 質疑応答
本日の流れ
本日出てくるおもな用语
①テーマ
WordPress で構築された Web サイトの
外観(見た目)を制御するもの
テーマ
②子テーマ(亲テーマ)
単体では利用できないが、
元となるテーマ(親テーマ)の内容を引き継いで、
変更する部分だけを記述することで
外観(見た目)を制御できるもの。
子テーマ
③サイトフロントページ
Web サイトのトップページ
サイトフロントページ
④ブログ投稿インデックスページ
すべての投稿一覧を表示するページ。
ブログ投稿インデックスページ
⑤テンプレートファイル?
テンプレート階層
ページを表示する時は、
テンプレートファイルを利用する。
適用されるテンプレートファイルはページ種類と
優先順位(テンプレート階層)によって決まる。
テンプレートファイル?テンプレート階層
丑迟迟辫://飞辫诲辞肠蝉.辞蝉诲苍.箩辫/テンプレート阶层
固定ページの場合
カスタムテンプレートファイル
page-{slug}.php
page-{id}.php
page.php
index.php
高い
!
!
!
低い
ページ作成画面の「テンプレート」で
選択したファイル
優先順位
ブログ投稿インデックスページの場合
home.php
!
!
!
index.php
高い
!
!
!
低い
優先順位
サイトフロントページの場合
front-page.php
!
固定ページのルール or
 ブログ投稿インデックスのルール
!
index.php
高い
!
!
!
!
低い
表示設定「フロントページ」の場合
表示設定「投稿ページ」の場合
優先順位
index.phpは全ての種類のページに対し、
最も優先順位が低い
index.php
⑥テンプレートタグ
テンプレートファイルの中で利用し、
WordPress で構築された Web サイトの
データ(内容や画像等)を表示するコード。
テンプレートタグ
①本日出てくるおもな用语
②ハンズオン
I.子テーマの作成
II.サイトフロントページのカスタマイズ
III.各自でカスタマイズ + 質疑応答
本日の流れ
子テーマを作成して
サイトフロントページをカスタマイズする
親テーマは「Twenty Fourteen」を利用
ハンズオン内容
Before
はし?めてのカスタマイス?
After
写真素材ぱくたそ
https://www.pakutaso.com
れっつ。ハンズオン!
Unsplash
https://unsplash.com/
①本日出てくるおもな用语
②ハンズオン
I.子テーマの作成
II.サイトフロントページのカスタマイズ
III.各自でカスタマイズ + 質疑応答
本日の流れ
子テーマの作成
親テーマに存在するファイルと同名のファイルが
子テーマにある場合、子テーマのファイルが優先
される。
子テーマの基本①
functions.phpについては親テーマ、子テーマの
両方が読み込まれ、子テーマ、親テーマの順番で
読み込まれる。
子テーマの基本②
子テーマの作成
/*
Theme Name: WP MATSUDO
Template: twentyfourteen
*/
① テーマディレクトリ wp-content/themes 内に、子テーマ用のディレクトリ?
  wpmatsudo(任意に指定可)を作成
② その中に style.css を作成する
①
②
style.cssの内容
基本的にこの行(Template)
だけあれば、子テーマになる
子テーマの作成(確認)
新しいテーマとして
追加されている
子テーマの作成(確認)
有効化してみると
レイアウトが崩れている
親テーマのスタイルシートが
反映されていないため
親テーマのスタイルを
読み込む
親テーマのスタイルを読み込む
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
① 子テーマディレクトリ 内に functions.php を作成
①
functions.php
親テーマのスタイルを読み込む(確認)
親テーマを有効化した時と同じ表示になる
子テーマに
外部ファイルを読み込む
+1このマークがあるスライドは
少し踏み込んだ内容です。
今回、難しいと感じても大丈夫!
おいおい理解していきましょう。
例)CSSフレームワークを読み込む
※今回は Foundation を使ってみます
+1
CSSフレームワーク(Foundation)を読み込む
① フレームワークをダウンロードする
http://foundation.zurb.com/develop/download.html
② 子テーマ用ディレクトリ 内にディレクトリ inc を作成しその中に?
  foundation.min.css を配置する
②
+1
今回はEssential をダウンロード
①
CSSフレームワーク(Foundation)を読み込む
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'foundation', get_stylesheet_directory_uri() . '/inc/foundation.min.css' );
}
③ functions.php に追記する
functions.php
+1
③
get_template_directory_uri()
get_stylesheet_directory_uri()
親テーマのディレクトリを参照
子テーマのディレクトリを参照
①本日出てくるおもな用语
②ハンズオン
I.子テーマの作成
II.サイトフロントページのカスタマイズ
III.各自でカスタマイズ + 質疑応答
本日の流れ
フロントページを指定する
①管理画面を操作して
カスタマイズする
フロントページを指定する
フロントページと表示されているのを確認
フロントページにトップページを指定
ヘッダーイメージを追加する
①管理画面を操作してカスタマイズする
ヘッダーイメージの设定
テーマによっては
「外観」 - 「ヘッダー」が
表示されていない場合がある
+1
カスタムヘッダーを表示する場合 functions.php に
add_theme_support( 'custom-header' );
の記述が必要。
カスタムヘッダー(メニュー)の表示制限
+1
今回利用している親テーマ(「Twenty Fourteen」)は、 ?
themes/twentyfourteen/inc/cuntom-header.php ?
に記述されている
メニューを変更する
①管理画面を操作してカスタマイズする
メニューを変更する
今回は Primary と入力
トップメインメニューを選択
メニューを選択してメニュー追加
メニュー保存で完了
「メニュー設定」に
何も表示されない場合がある
+1
カスタムメニューを表示する場合 functions.php に
register_nav_menu( $location, $description );
の記述が必要。
カスタムメニューの表示制限
+1
②ファイルを編集して画面を
カスタマイズする
サイトフロントページに
特定の固定ページの情報を表示
+1
②ファイルを編集してカスタマイズする
今回の手順
1. 親テーマディテクトリのindex.php を?
 子テーマのディレクトリにコピーする
2. 名前を front-page.php に変更する?
3. front-page.php を編集する
使えそうなテンプレートファイルをコピーする
+1
<ul class="medium-block-grid-3">
<?php
$list = array( 'dishes','room','news' );
foreach ($list as $value){ $page = get_page_by_path($value); $id[] = $page->ID;}
?>
<?php
$args = array( 'post_type' => 'page', 'posts_per_page' => count($list), 'post__in' => $id, 'order' => 'DESC' );
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<li>
<a href="<?php the_permalink(); ?> >
<?php the_title('<h2 class="entry-title">', '</h2>'); ?>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail('medium'); } ?>
<?php the_excerpt(); ?>
</a>
</li>
<?php endwhile; else : endif; wp_reset_postdata(); ?>
</ul>
31行目の<?php ? 52行目の?> を以下に置き換え
get_template_directory_uri()
スラッグ名を変数に入れる
スラッグ名からページIDを取得 ページIDをクエリの引数に入れる
+1
サイトフロントページのカスタマイズの確認
+1
写真素材ぱくたそ
https://www.pakutaso.com
①本日出てくるおもな用语
②ハンズオン
I.子テーマの作成
II.サイトフロントページのカスタマイズ
III.各自でカスタマイズ + 質疑応答
本日の流れ
ご清聴ありがとうございました
おわり

More Related Content

はし?めてのカスタマイス?