狠狠撸
Submit Search
はし?めてのカスタマイス?
?
1 like
?
984 views
Seiichiro Mishiba
Follow
松戸奥辞谤诲笔谤别蝉蝉部:はじめてのカスタマイズ
Read less
Read more
1 of 63
More Related Content
はし?めてのカスタマイス?
1.
松戸WordPress部 2015年5月20日 はじめてのカスタマイズ Unsplash https://unsplash.com/
2.
名前 三柴 誠一郎 出身 愛媛県 拠点 千葉県松戸市 趣味 カメラ、 旅、
料理、 滝めぐり、 ダムめぐり、 城めぐり 特徴 絶望的に方向音痴 自己紹介 高知城(鷹城) 彦根城(金亀城)
3.
経歴 1996年にIT会社へ入社。業務システムの企画?構築?運用等の 経験を経て2014年からフリーランスとして活動中。 活動 松戸でWordPressに関するセミナーを運営 【Facebook】 https://www.facebook.com/groups/wordpress.banana.cluster/ 【Doorkeeper】 https://wpmatsudo.doorkeeper.jp/ 経歴?活動
4.
①本日出てくるおもな用语 ②ハンズオン I.子テーマの作成 II.サイトフロントページのカスタマイズ III.各自でカスタマイズ + 質疑応答 本日の流れ
5.
①本日出てくるおもな用语 ②ハンズオン I.子テーマの作成 II.サイトフロントページのカスタマイズ III.各自でカスタマイズ + 質疑応答 本日の流れ
6.
本日出てくるおもな用语
7.
①テーマ
8.
WordPress で構築された Web
サイトの 外観(見た目)を制御するもの テーマ
9.
②子テーマ(亲テーマ)
10.
単体では利用できないが、 元となるテーマ(親テーマ)の内容を引き継いで、 変更する部分だけを記述することで 外観(見た目)を制御できるもの。 子テーマ
11.
③サイトフロントページ
12.
Web サイトのトップページ サイトフロントページ
13.
④ブログ投稿インデックスページ
14.
すべての投稿一覧を表示するページ。 ブログ投稿インデックスページ
15.
⑤テンプレートファイル? テンプレート階層
16.
ページを表示する時は、 テンプレートファイルを利用する。 適用されるテンプレートファイルはページ種類と 優先順位(テンプレート階層)によって決まる。 テンプレートファイル?テンプレート階層
17.
丑迟迟辫://飞辫诲辞肠蝉.辞蝉诲苍.箩辫/テンプレート阶层
18.
固定ページの場合 カスタムテンプレートファイル page-{slug}.php page-{id}.php page.php index.php 高い ! ! ! 低い ページ作成画面の「テンプレート」で 選択したファイル 優先順位
19.
ブログ投稿インデックスページの場合 home.php ! ! ! index.php 高い ! ! ! 低い 優先順位
20.
サイトフロントページの場合 front-page.php ! 固定ページのルール or ブログ投稿インデックスのルール ! index.php 高い ! ! ! ! 低い 表示設定「フロントページ」の場合 表示設定「投稿ページ」の場合 優先順位
21.
index.phpは全ての種類のページに対し、 最も優先順位が低い index.php
22.
⑥テンプレートタグ
23.
テンプレートファイルの中で利用し、 WordPress で構築された Web
サイトの データ(内容や画像等)を表示するコード。 テンプレートタグ
24.
①本日出てくるおもな用语 ②ハンズオン I.子テーマの作成 II.サイトフロントページのカスタマイズ III.各自でカスタマイズ + 質疑応答 本日の流れ
25.
子テーマを作成して サイトフロントページをカスタマイズする 親テーマは「Twenty Fourteen」を利用 ハンズオン内容
26.
Before
28.
After
29.
写真素材ぱくたそ https://www.pakutaso.com
30.
れっつ。ハンズオン! Unsplash https://unsplash.com/
31.
①本日出てくるおもな用语 ②ハンズオン I.子テーマの作成 II.サイトフロントページのカスタマイズ III.各自でカスタマイズ + 質疑応答 本日の流れ
32.
子テーマの作成
33.
親テーマに存在するファイルと同名のファイルが 子テーマにある場合、子テーマのファイルが優先 される。 子テーマの基本①
34.
functions.phpについては親テーマ、子テーマの 両方が読み込まれ、子テーマ、親テーマの順番で 読み込まれる。 子テーマの基本②
35.
子テーマの作成 /* Theme Name: WP
MATSUDO Template: twentyfourteen */ ① テーマディレクトリ wp-content/themes 内に、子テーマ用のディレクトリ? wpmatsudo(任意に指定可)を作成 ② その中に style.css を作成する ① ② style.cssの内容 基本的にこの行(Template) だけあれば、子テーマになる
36.
子テーマの作成(確認) 新しいテーマとして 追加されている
37.
子テーマの作成(確認) 有効化してみると レイアウトが崩れている 親テーマのスタイルシートが 反映されていないため
38.
親テーマのスタイルを 読み込む
39.
親テーマのスタイルを読み込む <?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
40.
親テーマのスタイルを読み込む(確認) 親テーマを有効化した時と同じ表示になる
41.
子テーマに 外部ファイルを読み込む +1このマークがあるスライドは 少し踏み込んだ内容です。 今回、難しいと感じても大丈夫! おいおい理解していきましょう。
42.
例)CSSフレームワークを読み込む ※今回は Foundation を使ってみます +1
43.
CSSフレームワーク(Foundation)を読み込む ① フレームワークをダウンロードする http://foundation.zurb.com/develop/download.html ② 子テーマ用ディレクトリ
内にディレクトリ inc を作成しその中に? foundation.min.css を配置する ② +1 今回はEssential をダウンロード ①
44.
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() 親テーマのディレクトリを参照 子テーマのディレクトリを参照
45.
①本日出てくるおもな用语 ②ハンズオン I.子テーマの作成 II.サイトフロントページのカスタマイズ III.各自でカスタマイズ + 質疑応答 本日の流れ
46.
フロントページを指定する
47.
①管理画面を操作して カスタマイズする
48.
フロントページを指定する フロントページと表示されているのを確認 フロントページにトップページを指定
49.
ヘッダーイメージを追加する ①管理画面を操作してカスタマイズする
50.
ヘッダーイメージの设定
51.
テーマによっては 「外観」 - 「ヘッダー」が 表示されていない場合がある +1
52.
カスタムヘッダーを表示する場合 functions.php に add_theme_support(
'custom-header' ); の記述が必要。 カスタムヘッダー(メニュー)の表示制限 +1 今回利用している親テーマ(「Twenty Fourteen」)は、 ? themes/twentyfourteen/inc/cuntom-header.php ? に記述されている
53.
メニューを変更する ①管理画面を操作してカスタマイズする
54.
メニューを変更する 今回は Primary と入力 トップメインメニューを選択 メニューを選択してメニュー追加 メニュー保存で完了
55.
「メニュー設定」に 何も表示されない場合がある +1
56.
カスタムメニューを表示する場合 functions.php に register_nav_menu(
$location, $description ); の記述が必要。 カスタムメニューの表示制限 +1
57.
②ファイルを編集して画面を カスタマイズする
58.
サイトフロントページに 特定の固定ページの情報を表示 +1 ②ファイルを編集してカスタマイズする
59.
今回の手順 1. 親テーマディテクトリのindex.php を? 子テーマのディレクトリにコピーする 2.
名前を front-page.php に変更する? 3. front-page.php を編集する 使えそうなテンプレートファイルをコピーする +1
60.
<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
61.
サイトフロントページのカスタマイズの確認 +1 写真素材ぱくたそ https://www.pakutaso.com
62.
①本日出てくるおもな用语 ②ハンズオン I.子テーマの作成 II.サイトフロントページのカスタマイズ III.各自でカスタマイズ + 質疑応答 本日の流れ
63.
ご清聴ありがとうございました おわり