Embed Size (px)
Citation preview
WordPress研究会2019
2019年8月28日 比留間
WordPressをカスタマイズする
第6回
内容
2
1. WordPressのカスタマイズ
2. 「テーマの編集」機能の利用
3. 追加CSSの利用
4. Twenty Seventeenの子テーマの作成
5. 「functions.php」
6. 「style.css」
7. 子テーマの選択と動作
8. 子テーマの編集
9. プラグイン「Page Builder」によるレイアウトの設定
10. WordPressのカスタマイズの位置付け
11. 参考記事
1. WordPressのカスタマイズ
• WordPressのカスタマイズ
– 既存のWordPressに、CSS言語やPHP言語を使用して手を加えること
• カスタマイズ方法
– 方法1: 「テーマの編集」機能を利用する
– 方法2: 「追加CSS」を利用する
– 方法3: 「子テーマ」を利用する
– 「親テーマ」の機能やスタイルを継承する
– 「子テーマ」で「親テーマ」の機能やスタイルをオーバライドする
– 「親テーマ」のアップデートの際にカスタマイズの内容が別ファイルのため上書きされない
2. 「テーマの編集」機能の利用
• 「外観-テーマの編集」から行う
• 既存のテーマを直接カスタマイズする
• アップデートの際にファイルがすべて上書きされてしまう
• 苦労してカスタマイズしたものがすべてなかったことになる
3. 追加CSSの利用
• 「外観-カスタマイズ-追加CSS」を選択
• CSSを追加する
• 例:タイトルの大文字変換を中止する
– .site-title {
– text-transform: none;
– }
4. TwentySeventeenの子テーマの作成
• 既定のフォルダを作成
– 「twentyseventeen-child」
• 「twentyseventeen-child」内に最低２つのファイルを作成
– 「functions.php」
– 「style.css」
• 「twentyseventeen-child」をzip形式で圧縮
• テーマ「twentyseventeen-child」のアップロード
– 「外観-テーマ-新規追加」で実施
5. 「functions.php」
– <?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( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array(‘parent-style’)
– );
– }
– ?>
6. 「style.css」
– /*
– Theme Name: Twenty Seventeen Child
– Description: Twenty Fifteen Child Theme
– Author: Kazuo Hiruma
– Template: twentyseventeen
– Version: 1.0.0
– */
7. 子テーマの選択と動作
• 子テーマの選択
– 「外観-テーマ」で子テーマが選択可能となる
– 「twentyseventeenｰchild」を有効化する
• 子テーマの動作
– 「themes.twentyseventeenｰchild」にあるファイルの指定が優先動作
– 無いものは「themes.twentyseventeen」の中にある指定が動作
8. 子テーマの編集
• 子テーマの編集
– [外観-テーマの編集]よりファイルの内容を修正可能
– 「themes twentyseventeenｰchild/」直下に存在しているファイルが対象
9. プラグイン「Page Builder」によるレイアウトの設定
• 固定ページおよび投稿のレイアウトの設定ができる
• 操作メニューを使ってレイアウトを決め、コンテンツを入れる
9.1. プラグイン「Page Builder」によるHP
http://abi.sakura.ne.jp/wpedu/pagebuilder/
9.2. 「Page Builder」の導入
9.3. 「Page Builder」の導入
9.4. バンドル Widgetsの設定
9.5. 「固定ページ」編集画面
プラグイン「Page Builder」 を導入すると「ページビルダー」タグが追加される
「ページビルダー」タグを選択するとレイアウト設定画面が表示される
9.6. ページビルダーの設定
• 列を追加
• ウィジットを追加
9.7. 列を追加
列を追加 → 行のレイアウトの選択 → 挿入
9.7. 列を追加
複数の列を追加
9.8. ウィジェット を追加（１）
9.8. ウィジェット を追加（２）
• 各カラムにウィジェットを追加
• ドラッグ&ドロップでウィジェットの移動が可能
9.9. テーマ「GREATMAG」 （２）
10. WordPressのカスタマイズの位置付け
• WordPress の特徴
– WordPressの基本を知ると情報が素早く発信できる
• 情報発信とカスタマイズ
– 情報発信: WordPressの基本を知らないと情報発信できない
– カスタマイズ: Web言語を知らないとカスタマイズできない
• 情報発信のための学習を優先する
• カスタマイズよりも情報発信
1. まず最初に発信したいものを作り上げる → 基本デザイン(テーマの選定)とコンテンツ
2. WordPressの構造と構成要素を学ぶ
3. 時間が出来たらHTMLタグやCSSなどについても少しずつ学ぶ
4. 余裕があればPHPなどについても少しずつ学ぶ
5. そして学ぶ楽しさを知る
11. 参考記事
• WordPressカスタマイズの基礎が全て分かる初心者必読の記事10選
– https://bazubu.com/wp-customize-7166.html
• 【初心者向け】初めてのWordPressでカスタマイズをする手順とは？
– https://blog.codecamp.jp/wordpress-beginner-customize
• WordPressのカスタマイズテクニックが学べる！初心者にオススメしたい参考記事30選
– https://ferret-plus.com/7818
• 【コピペでデキる】WordPress基本カスタマイズ~入門編~
– https://www.kagoya.jp/howto/wordpress/wordpress_customize/
• 直感操作でレスポンシブページ作成。WPプラグイン「ページビルダー(Page Builder)」
– http://wp-themetank.com/wordpress-plugin-responsive-page-builder/
個別相談会
