実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす
-
Upload
keisuke-imura -
Category
Documents
-
view
4.869 -
download
4
description
Transcript of 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす
![Page 1: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/1.jpg)
実践!WordPressの企業サイト向け統合プラグイン
"WP SiteManager"を使いこなす
井村 圭介2013.05.17
![Page 2: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/2.jpg)
井村 圭介K E I S U K E I M U R A
フリーランスのWebデザイナー/エンジニア。WordPressが大好きです。@imura_design
![Page 3: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/3.jpg)
![Page 4: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/4.jpg)
![Page 5: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/5.jpg)
![Page 6: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/6.jpg)
![Page 7: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/7.jpg)
![Page 8: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/8.jpg)
![Page 9: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/9.jpg)
WP SiteManagerとは
ナビゲーションやユーザーエージェントごとのテーマの切り替え、キャッシュなどの、WordPressでWebサイトを作るときによく使う機能をまとめたプラグイン
![Page 10: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/10.jpg)
公式ドキュメント■公式ドキュメントhttp://www.wp-sitemanager.com/
■プラグイン公式ディレクトリhttp://wordpress.org/extend/plugins/wp-sitemanager/
■facebookページhttp://www.facebook.com/wp.sitemanager
![Page 11: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/11.jpg)
WP SiteManagerの開発者
primestrategy jim912
日本語ドキュメントも充実!
![Page 12: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/12.jpg)
WP SiteManagerのモジュール•サイトマップ表示•パンくずナビ表示•ページナビ(ページャー)表示•サブナビ表示•メタキーワード、ディスクリプション設定•デバイス判定とテーマ切り替え機能•ページキャッシュ機能•(OGPも実装するかも!?)
@gatespace_k
![Page 13: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/13.jpg)
WP SiteManagerのインストール
•管理画面にメニューができる•デバイスとキャッシュ用のテーブルができる
■プラグイン公式ディレクトリhttp://wordpress.org/extend/plugins/wp-sitemanager/
![Page 14: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/14.jpg)
サイトマップの機能
•カテゴリー(カスタムタクソノミー)のアーカイブを表示•出力階層の制限•デフォルトのスタイルシートもある!•特定ページの除外
「サイトマップ」から設定
![Page 15: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/15.jpg)
サイトマップを表示する
1.サイトマップ用の固定ページを作成2.コンテンツに[sitemap]を記述
![Page 16: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/16.jpg)
パンくずナビを表示する1.表示したいテンプレートにコードを書く。
<?php
if( class_exists( 'WP_SiteManager_bread_crumb' ) ){
WP_SiteManager_bread_crumb::bread_crumb();
}
?>
![Page 17: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/17.jpg)
<?php
if( class_exists( ‘WP_SiteManager_bread_crumb’ ) ){
WP_SiteManager_bread_crumb::bread_crumb(
‘navi_element=nav&elm_id=bread-‐crumb’
);
}
?>
パンくずナビのパラメータの指定:方法1
![Page 18: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/18.jpg)
<?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
![Page 19: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/19.jpg)
ページナビを表示する1.表示したいテンプレートにコードを書く。
<?php
if ( class_exists( 'WP_SiteManager_page_navi' ) ) {
WP_SiteManager_page_navi::page_navi();
}
?>
![Page 20: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/20.jpg)
•show_adjacent 前後ページへのリンクを表示するかどうか。デフォルトはtrue(表示)•show_boundary最初と最後のページへのリンクを表示するかどうか。デフォルトはtrue(表示)
ページナビのよく使うパラメータ
![Page 21: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/21.jpg)
サブナビの機能
•ホームの表示の設定•投稿・アーカイブページの表示の設定•固定ページの表示の設定
ウィジェットの「サブナビ」から設定
![Page 22: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/22.jpg)
サブナビを表示する1.テーマのウィジェットを有効化2.「外観」→「ウィジェット」から「サブナビ」を追加3.表示したいテンプレートにコードを書く
<?php
dynamic_sidebar( ‘primary-‐widget-‐area’ );
?>
![Page 23: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/23.jpg)
メタ情報の設定
•サイト全体のディスクリプション・キーワード•ページ、投稿ごとのディスクリプション・キーワード•抜粋をディスクリプションとして出力
「SEO & SMO」から設定
![Page 24: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/24.jpg)
メタ情報を表示する
1.プラグインを有効化すると勝手に出ます!
※wp_head()はちゃんと書いてね。
![Page 25: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/25.jpg)
デバイス判定によるテーマの切り替え
■レスポンシブウェブデザインと比較して
•自由度の高いデザイン、コーディングがしやすい•高速化に特化した設計が可能•データベースがひとつなのでコンテンツを一元管理•テンプレートを複数管理する必要がある•コンテンツのコーディングに工夫が必要
![Page 26: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/26.jpg)
デバイス判定の設定
•デバイスグループの追加•デバイスの追加「キーワード」にマッチさせたい正規表現文字列を入力
•デバイスグループごとにテーマを切り替え
「デバイス判定」から設定ユーザーエージェントを判断してテーマを切り替えます
自由度が高い!
![Page 27: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/27.jpg)
WP SiteManagerのキャッシュ
■ファイルキャッシュやリバースプロキシと比較して
•デバイスごとにキャッシュを切り分けられる•ページごとにキャッシュの制御がしやすい•データベースにアクセスするのでサーバに負荷がかかる•同様の理由でキャッシュページの閲覧は微妙に遅い•実装がめんどくさい ←SiteManagerありがとう!
![Page 28: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/28.jpg)
キャッシュ機能を有効にする
1.wp-config.phpに↓を記述。
define('WP_CACHE', true);
![Page 29: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/29.jpg)
キャッシュの設定「キャッシュ」から設定
•有効期限の設定•キャッシュしないページの設定•キャッシュのクリア
※ログイン中はキャッシュが表示されない!
![Page 30: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/30.jpg)
apply_filters
apply_filters_ref_array
フィルターフックを使ったカスタマイズ
http://www.prime-strategy.co.jp/wp/2429/
でソースを検索
■参考になるスライド
![Page 31: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/31.jpg)
フィルターフックを使ったカスタマイズ
値 フィルター 新しい値
![Page 32: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/32.jpg)
フィルターフックを使ったカスタマイズ<?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' );
?>
![Page 33: 実践!WordPressの企業サイト向け統合プラグイン"WP SiteManager"を使いこなす](https://reader035.fdocument.pub/reader035/viewer/2022062300/559848ef1a28ab52168b479b/html5/thumbnails/33.jpg)
ありがとうございました。