2013年6月15日（土）、WordCamp Kobe 2013(ワードキャンプ神戸2013)が開催されました。

WordCamp Kobe 2013 公式サイト WordCampとはWordPressというオープンソースのブログ／CMS プラットフォームのイベントです。
開催される地域のユーザーが中心となり、世界中で開催されています。 WordCamp Japan　／　WordCamp Central 開催するためにはWordCamp Foundationへの申請が必要で幾つかのガイドラインがあります。
今回私は、1時限目の『sneak idea show – コンテンツやデザインを実現するための事例集』でお話しさせて頂いた後、5時限目の『デキル女子の大本命WordPress座談会』で司会をいたしました。
『コンテンツやデザインを実現するための事例集』では、基本的に「こんなことができるよ」という実例を知ってもらうという事に重点を置き細かいコードの説明などはしなかったので、こちらにフォローアップ記事をおきます。

コンテンツやデザインを実現するための事例集

今回は同じサイトマップでありながら、WordPress構築の仕方が違うサイト2つを使って紹介させて頂きました。
時間の関係で切らなければいけない部分も多く伝わりにくかったかもしれませんが、WordPressのサイトを仕事として作る場合「お客さまが今後どのように更新していくか」を考えるのも大切と思っています。
生きているサイトを作るためには更新をたくさんして欲しい。そのためにWordPressで作っているという事が多いはず。
なのに更新がしにくいじゃダメですよね。 なので紹介したAのサイトは「今後更新していく人がWebをあまりわからない」→「ここを更新したらOK!」と迷わないようにしました。
Bのサイトは「更新していく人がある程度HTML等がわかる」→「更新できる部分の自由度を高くしている」という違いによって、構築の内容が変わりました。

紹介したプラグイン

その1 Simple Map

公式ダウンロード　https://wordpress.org/plugins/simple-map/ 使い方　https://firegoby.jp/archives/3306
WordPressにGoogle Mapsを貼り付けるためのプラグインです。
今回紹介した事例では20店舗以上の地図を出さなければいけないということで各店舗の地図にこちらのプラグインを使いました。 ポイントは[map addr=”東京都千代田区永田町1-7″] のように住所を入れたらMapが表示されるので、お客様側でも店舗の引っ越しがあったり新店舗を増やしたいという時にも簡単に使えるという点です。
ただこのプラグインは1つの地図に複数のピンを立てることはできず、「全店舗がこれだけありますよ」と見せたい部分には使えませんでした。
この事について作者の宮内さんがちょうど『ウェブディレクターのためのWordPressサイト運用事例』でお話しされるのにスピーカーとしていらっしゃっていたので、「複数ピン立てられるようにして下さいよー」と図々しくもお話ししたところ、そうするためには“住所で入力できる”という大きなポイントがなくなっちゃうかも、ということでした。
「シンプルじゃなくなっちゃうね…」と。 こちらの件、女子座談会や懇親会でそれならばこのプラグインは？的な紹介を頂いたので末尾にでも記入します。 →6/20　宮内さんがoEmbedに対応する形で複数ピンが立てられるようにアップデートしてくださいました！ Simple Map 0.6.0 – oEmbedに対応しましたー。｜firegoby ありがとうございます！！！

その2 JetPack

公式ダウンロード　https://wordpress.org/plugins/jetpack/ 公式サイト　https://jetpack.me/
アクセス解析にJetPackをおすすめしました。
管理画面からすぐグラフとアクセス数とリファラーやサーチ文言が見れるJetPackは納品時に入れておくと、今後の更新にもお客さまの意欲アップに繋がると思います。 質問も頂いたのですが、細かいアクセス解析を必要とする場合はGoogle Analyticsを使います。
併用することも多いです。 ただGoogle Analyticsだと改めてGoogle Analyticsのサイトに飛ばなければいけないし、それすら面倒になってしまうお客さまもいらっしゃったり…しませんか？ JetPackでアクセス解析を入れておいたら、ひとまず「管理画面からすぐ見れる」というのがポイントです。
JetPackはAutomatic社の作っているプラグインで他にもさまざまな機能がついています。
もうひとつおすすめはギャラリー機能です。Tiles/squrea/Circlesとその時々に選んで作成できます。
投稿にたくさん写真を入れる可能性がある場合、ギャラリー用のCSSを用意することもできますがこちらを使うと便利だと思います。 JetPackはそれだけで1セッションできちゃうくらい多機能なので、良かったらぜひ試してみてください。

テーマディレクトリから画像を呼び出すショートコード

企業サイトの構築の際にはたくさんの画像を使うと思います。
その際に「メディアを追加」で画像を追加するのではなく、テーマ用の画像としてテーマフォルダにimgフォルダを作ってアップすることが多いです。 その中で、ローカルで構築したサイトを本アップする、もしくはWordPressをサブディレクトリにインストールして、公開はドメイン直下のURLで行いたい場合、投稿や固定ページの入力画面で記入された画像のパスを公開時に全て書き換えなければいけませんでした。

functions.phpに記述する事によって画像のパスをショートコードで記述できるようにする。 下記「hogehoge」部分をその時の案件に合わせて変えています。コード作成：bren

function hogehoge_theme_url_func($atts)
{
	extract(
		shortcode_atts(
			array(
				'path'		=> '',
			),
			$atts
		)
	);

	$html = get_stylesheet_directory_uri() . $path;

	return $html;
}
add_shortcode( 'hogehoge_theme_url', 'hogehoge_theme_url_func' );

function hogehoge_theme_img_func($atts)
{
	extract(
		shortcode_atts(
			array(
				'src'		=> '',
				'width'		=> '',
				'height'	=> '',
				'alt'		=> '',
			),
			$atts
		)
	);

	$params = array();
	if ($src) {
		$params[] = 'src="' . get_template_directory_uri() . $src . '"';
	}
	if ($width) {
		$params[] = 'width="' . $width . '"';
	}
	if ($height) {
		$params[] = 'height="' . $height . '"';
	}
	if ($alt) {
		$params[] = 'alt="' . $alt . '"';
	}

	$html = '<img ' . implode(' ', $params) . ' />';

	return $html;
}
add_shortcode( 'hogehoge_theme_img', 'hogehoge_theme_img_func' );

その上で投稿や固定ページの入力画面で画像のパスを

<img alt="" src="[hogehoge_theme_url]/img/about.gif" />

とする。 これで公開時に画像のパスの書き換えをしなくても済むようになりました。

WordPressでのメニューのカレント

WordPressでサイトを作った時に「今いるページでメニューはロールオーバー状態で表示したい」というような要望を受けたことありませんか？ 私は良くあります。これの解決方法は意外と簡単です！ wp_nav_menu()でメニューを作っておけば現在ページのメニューに

</pre>
<ul>
	<li class="current-menu-item">

と自動でクラスを振ってくれます。 なのでCSS側で

li.current-menu-item{ /*任意のCSS*/ }

でカレントメニュー用のCSSを設定できちゃいます。 リハーサルの時にこの発表をしたらひっしーこと菱川さんがwp_nav_menuはほぼあらゆる場合で使えるから安心して発表していいよ、と教えてくださいました。 wp_nav_menu のクラスに独自ルールを追加するコードつき！これは便利そう！

@nukaga wp_nav_menuはルールをフィルターでカスタマイズできるので、ほぼあらゆる場合で使えます。 https://t.co/mEJej6HLnD — Takuro Hishikawa (@HissyNC) June 9, 2013

こちらも参考に

今回のこのセッションは杉山さん、中根さんと3人で打ち合わせをして先に何を紹介するかなどを決めました。
例えばコンテンツの順番を変更するプラグインや、管理画面をカスタマイズするやり方などはそれぞれの方法は違っても「こんなことをやっています」という話では全員からあがったので、とても需要が高いのかなと感じました。
お二方もぞれぞれのフォローアップ記事をアップしていらっしゃるのでぜひ見てみてください！
杉山さん→WordCamp Kobe2013 “コンテンツやデザインを実現するための事例集” 補足資料
中根さん→WordCamp Kobe 2013で事例紹介をさせていただきました

デキル女子の大本命WordPress座談会

カフェスペースを貸し切っての座談会。 座談会と言っても、一応先にネタは仕込んでおきましょうということで

• ・日本語・英語のおすすめWEBフォント
• ・WordPress用にデザインする時の注意点
• ・デザイナーが構築した時の失敗談や苦労話
• ・ビジュアル的に使えるおすすめプラグイン
• ・ビジュアル的に使えるおすすめテンプレート

について話しましょう、ということは決めていました。 それを仕込んでいるのを見られてしまったの図

セッション聞いてるふりして今頃スライドつくってるやつがいるぞーw @nukaga https://t.co/RUtRPgpHwA — Takayuki Miyauchi (@miya0001) June 15, 2013

(ちゃんと聞いてたよ！) 座談会なので基本は和気藹藹。
座談会メンバーとして中心で自己紹介をさせて頂いた人間だけではなく、周りからも意見や質問が飛び交い、活発な意見交換ができました。
「デキル女子」と名づけられていましたが、男性も大歓迎！で本当にみんなで話ができたのが良かったなと思います。
座談会メンバーのアソウさん、今村さん、石塚さん、皿海さん、ながとみさん、播口さん、村重さん、山本さんお疲れさまでした！
つたない司会だったけれど、楽しかったならいいな。
周りで聞いたり参加したりして下さった皆様もひとつでも持ち帰られることがあっってくれたらいいなと思います。

感じたこと、これからのこと

午後にはアンカンファレンスの「レスポンシブ de WordPress」にも参加したのですが、セッションを聞くだけでなく質問をぶつけたり意見を聞いたり、情報交換ができる場というのはやはりとても良いと思いました。
WordCampというのはWordPressのイベントなのですが、WordPressがオープンソースであり「みんなで作りあげるものだ」という事が、こういったアンカンファレンス等に色濃く反映されていると思います。
今回は国内のWordCampでは初の有料イベントにしたということもあり、運営スタッフの皆さんはとても大変だったと思います。
ユーザーが作るユーザーのためのイベント。
「勉強をする」「情報交換をする」そして「楽しむ」。それは参加する側スタッフ側、どちらにも必要なことで、今回のWordCamp神戸はそれがとてもバランス良くできていたのではないかと感じました。
そして私も楽しかったです！ 懇親会含め、お話しさせて頂いた皆さまありがとうございました。
そして実行委員長のブレンさん、副実行委員長のまみさんをはじめとする実行委員の皆さまお疲れさまでした。
個人的な課題としては、WordPressのことは勿論だけど、英語！英語をどうにかしたいとしみじみ。
これは、ここ最近webのなんやかやをしててもすごく感じている事なのですが。 今回スピーカーでAutomattic社のKarimさんが来てくださっていて、お話しできる機会はたくさんあったのに同じく基調講演に来てくださっていたAutomaticc社の直子さん（https://ja.naoko.cc/）に頼りきりになってしまったり、ほぼ日本語で話しかけていたり。
ちゃんともっとコミュニケーションを取りたいと思うので、なんとかしなければ！
せっかくWordPressという世界と繋がる場所の片隅にでも居ることができているのだから、諦めずに前向きにコミュニケーションを取るべく進みたいと思いました。（と同時にやっぱり日本語版作成チームの皆さんはやっぱりすごいなあとしみじみ。） そ
して私はWordPressコミュニティからもらってばかりで、自分が何を返していけるか考えていきたいと改めて思ったのでした。