Soumettre la recherche
Mettre en ligne
実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす
•
14 j'aime
•
8,214 vues
Keisuke Imura
Suivre
2013/5/17 第18回デザイン勉強会で使用するスライドです。 http://timing-design.jp/18th_designstudy/
Lire moins
Lire la suite
Signaler
Partager
Signaler
Partager
1 sur 33
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
WordPressをCMSとして利用するために便利なWP SiteManagerについて
WordPressをCMSとして利用するために便利なWP SiteManagerについて
Tsuyoshi.
イチから学ぶ パッケージマネージャーとLAMP環境
イチから学ぶ パッケージマネージャーとLAMP環境
Keisuke Imura
Sass + Foundation 5でレスポンシブペライチ制作
Sass + Foundation 5でレスポンシブペライチ制作
Keisuke Imura
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Keisuke Imura
High Performance Gulp
High Performance Gulp
Keisuke Imura
Foundation for Appsでザクザク作るモックアップ
Foundation for Appsでザクザク作るモックアップ
Keisuke Imura
Brooks v. Gregg
Brooks v. Gregg
Abdul-Hakim Shabazz
60点をとれるWebデザイン
60点をとれるWebデザイン
Keisuke Imura
Contenu connexe
Plus de Keisuke Imura
JavaScriptのエラーチェックツールをつくろうとした話
JavaScriptのエラーチェックツールをつくろうとした話
Keisuke Imura
テクニカルクリエイターの憂鬱
テクニカルクリエイターの憂鬱
Keisuke Imura
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
Keisuke Imura
ベンチャー広報のための時短デザインテクニック
ベンチャー広報のための時短デザインテクニック
Keisuke Imura
今日から始めるPython
今日から始めるPython
Keisuke Imura
2015年に向けたWordPress動向
2015年に向けたWordPress動向
Keisuke Imura
スタイルガイドを活用した運用に強いCMSサイト制作
スタイルガイドを活用した運用に強いCMSサイト制作
Keisuke Imura
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
Keisuke Imura
Plus de Keisuke Imura
(8)
JavaScriptのエラーチェックツールをつくろうとした話
JavaScriptのエラーチェックツールをつくろうとした話
テクニカルクリエイターの憂鬱
テクニカルクリエイターの憂鬱
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
ベンチャー広報のための時短デザインテクニック
ベンチャー広報のための時短デザインテクニック
今日から始めるPython
今日から始めるPython
2015年に向けたWordPress動向
2015年に向けたWordPress動向
スタイルガイドを活用した運用に強いCMSサイト制作
スタイルガイドを活用した運用に強いCMSサイト制作
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす
1.
実践!WordPressの 企業サイト向け統合プラグイン "WP SiteManager"を使いこなす 井村 圭介 2013.05.17
2.
井村 圭介 K E
I S U K E I M U R A フリーランスの Webデザイナー/エンジニア。 WordPressが大好きです。 @imura_design
9.
WP SiteManagerとは ナビゲーションやユーザーエージェントごとの テーマの切り替え、キャッシュなどの、 WordPressでWebサイトを作るときによく使う 機能をまとめたプラグイン
10.
公式ドキュメント ■公式ドキュメント http://www.wp-sitemanager.com/ ■プラグイン公式ディレクトリ http://wordpress.org/extend/plugins/wp-sitemanager/ ■facebookページ http://www.facebook.com/wp.sitemanager
11.
WP SiteManagerの開発者 primestrategy jim912 日本語ドキュメントも充実!
12.
WP SiteManagerのモジュール •サイトマップ表示 •パンくずナビ表示 •ページナビ(ページャー)表示 •サブナビ表示 •メタキーワード、ディスクリプション設定 •デバイス判定とテーマ切り替え機能 •ページキャッシュ機能 •(OGPも実装するかも!?) @gatespace_k
13.
WP SiteManagerのインストール •管理画面にメニューができる •デバイスとキャッシュ用のテーブルができる ■プラグイン公式ディレクトリ http://wordpress.org/extend/plugins/wp-sitemanager/
14.
サイトマップの機能 •カテゴリー(カスタムタクソノミー)のアーカイブ を表示 •出力階層の制限 •デフォルトのスタイルシートもある! •特定ページの除外 「サイトマップ」から設定
15.
サイトマップを表示する 1.サイトマップ用の固定ページを作成 2.コンテンツに[sitemap]を記述
16.
パンくずナビを表示する 1.表示したいテンプレートにコードを書く。 <?php if( class_exists(
'WP_SiteManager_bread_crumb' ) ){ WP_SiteManager_bread_crumb::bread_crumb(); } ?>
17.
<?php if( class_exists( ‘WP_SiteManager_bread_crumb’
) ){ WP_SiteManager_bread_crumb::bread_crumb( ‘navi_element=nav&elm_id=bread-‐crumb’ ); } ?> パンくずナビのパラメータの指定:方法1
18.
<?php $args = array(
‘navi_element’ => ‘nav’, ‘elm_id’ => ‘bread-‐crumb’ ); if( class_exists( ‘WP_SiteManager_bread_crumb’ ) ){ WP_SiteManager_bread_crumb::bread_crumb( $args ); } ?> パンくずナビのパラメータの指定:方法2
19.
ページナビを表示する 1.表示したいテンプレートにコードを書く。 <?php if (
class_exists( 'WP_SiteManager_page_navi' ) ) { WP_SiteManager_page_navi::page_navi(); } ?>
20.
•show_adjacent 前後ページへのリンクを表示するかどうか。デフォルトはtrue(表示) •show_boundary 最初と最後のページへのリンクを表示するかどうか。 デフォルトはtrue(表示) ページナビのよく使うパラメータ
21.
サブナビの機能 •ホームの表示の設定 •投稿・アーカイブページの表示の設定 •固定ページの表示の設定 ウィジェットの「サブナビ」から設定
22.
サブナビを表示する 1.テーマのウィジェットを有効化 2.「外観」→「ウィジェット」から「サブナビ」を追加 3.表示したいテンプレートにコードを書く <?php dynamic_sidebar( ‘primary-‐widget-‐area’
); ?>
23.
メタ情報の設定 •サイト全体のディスクリプション・キーワード •ページ、投稿ごとのディスクリプション・キーワード •抜粋をディスクリプションとして出力 「SEO & SMO」から設定
24.
メタ情報を表示する 1.プラグインを有効化すると勝手に出ます! ※wp_head()はちゃんと書いてね。
25.
デバイス判定によるテーマの切り替え ■レスポンシブウェブデザインと比較して •自由度の高いデザイン、コーディングがしやすい •高速化に特化した設計が可能 •データベースがひとつなのでコンテンツを一元管理 •テンプレートを複数管理する必要がある •コンテンツのコーディングに工夫が必要
26.
デバイス判定の設定 •デバイスグループの追加 •デバイスの追加 「キーワード」にマッチさせたい正規表現文字列を入力 •デバイスグループごとにテーマを切り替え 「デバイス判定」から設定 ユーザーエージェントを判断してテーマを切り替えます 自由度が高い!
27.
WP SiteManagerのキャッシュ ■ファイルキャッシュやリバースプロキシと比較して •デバイスごとにキャッシュを切り分けられる •ページごとにキャッシュの制御がしやすい •データベースにアクセスするのでサーバに負荷がかかる •同様の理由でキャッシュページの閲覧は微妙に遅い •実装がめんどくさい ←SiteManagerありがとう!
28.
キャッシュ機能を有効にする 1.wp-config.phpに↓を記述。 define('WP_CACHE', true);
29.
キャッシュの設定 「キャッシュ」から設定 •有効期限の設定 •キャッシュしないページの設定 •キャッシュのクリア ※ログイン中はキャッシュが表示されない!
30.
apply_filters apply_filters_ref_array フィルターフックを使ったカスタマイズ http://www.prime-strategy.co.jp/wp/2429/ でソースを検索 ■参考になるスライド
31.
フィルターフックを使ったカスタマイズ 値 フィルター 新しい値
32.
フィルターフックを使ったカスタマイズ <?php function custom_bread_crumb( $bread_crumb_arr
){ if( is_category() || is_single() ){ array_shift( $bread_crumb_arr ); } return $bread_crumb_arr; } add_filter( 'bread_crumb_arr', 'custom_bread_crumb' ); ?>
33.
ありがとうございました。
Télécharger maintenant