デザイン重視で構築するWordPressサイトのすゝめ〜俺たちのやりたいことがWordPressでできないわけがない〜【セーフ！】

デザイン重視で構築するWordPressサイトのすゝめセーフ

!

2012.11.03 - WordCamp Osaka 2012

このスライドはWordCamp Osaka 2012のセッションで実際に披露した内容に当日デモで動かした部分を加え、危ない橋を渡らないように改変を加えたものです

GOUTEN（@gouten5010）

お前誰やねん

デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない

自己紹介

Webデザイナーとかフロントエンジニアとか

小劇場系の舞台まわりでも活動中

gouten5010

GOUTEN普段は某IT企業の社畜


自己紹介


自己紹介 - 自分のサイト

http://blog.gouten.netGOUTEN.NET

http://blog.gouten.net



自己紹介 - 自分のサイト

一時閉鎖中5010 WORKS




自己紹介 - 悪巧みサイト

稼働準備中うぇぶろっこりー協会




自己紹介

稼働準備中属性：IT土方




自己紹介 - WordCamp Osaka 2012 実行委員ですが何か

主にCSSでデザインカスタマイズしましたWordCamp Osaka 2012 公式サイト





デザイン・構築全般をしましたWordCamp Osaka 2012 登録サイト



デザイン・構築全般にWordCamp Osaka 2012 登録サイト

特に力入れた


自己紹介 - いますぐフォロー

@gouten5010

www.facebook.com/gouten5010

ソーシャルアカウント

http://www.facebook.com/gouten5010

http://www.facebook.com/gouten5010

GOUTEN


自己紹介

gouten5010

Webデザイナーとかフロントエンジニアとか

小劇場系の舞台まわりでも活動中普段は某IT企業の社畜よろしくな！

アジェンダ


一体お前は何をやりたいんだ

デザイン重視っていったいどういうことなの…第1話：


一体お前は何をやりたいんだ

第2話：第3話：第3.5話：最終話：

カスタム投稿タイプで投稿を種類別に管理したいカスタムフィールドで更新を楽にしたいカスタムフィールドを自由に出力したいとりあえずまとめてみた




カスタム投稿タイプで投稿種類別にを管理したいカスタムフィールドで更新を楽にしたいカスタムフィールドを自由に出力したいとりあえずまとめてみた


デザイン重視って一体どういうことなの…



(個人差があります)



WordPressは

はやい




WordPressは

やすい




WordPressは

うまい

WordPressは「はやい」「やすい」「うまい」



・比較的簡単にインストールできて

・そんなに初期コストかからなくて

・あわよくば儲けることも出来る

はやい

やすい

うまい



どうせやるなら良いデザインがいい



・良いテーマが見つからない。

・コストを抑えたいけど　外注したくない。

GOUTEN的、デザインできないと思っている人が悩みがち！(偏見含む)



マリーアントワネットも言ってた（ウソです）

思ったようなテーマがなければ作ればいいじゃない

・完成図をイメージする・完全オリジナルにしない・どういう動きになるかを　考える

GOUTEN的デザイン３箇条



完成図をイメージする



ワイヤーフレームの作成が重要どこに何を配置するかということを考えることでサイト訪問者の動線も考えることができ、ユーザビリティの向上になる

方向性が見えていることでコーディング時に迷わない

サイト制作の目標が見えているので、早い

完全オリジナルにしない



「全くのオリジナルデザイン」を目指しがちの人は（そうでない人はごめんなさい）

まずはパクりましょう真似することは恥ではないWebサイトに限らず、自分が見て「いいな」と思ったものはどんどん真似していくことで、自分のスキルは確実に上がる

※真似するときは敬意を持って※ライセンス等には気をつけましょう

どういう動きになるかを考える



投稿やカスタムフィールド、またプラグインやfunctions.php等で設定するものがどういう出力をしてどういう動きをするかを把握することで、デザイン時に配置する項目や表示の方法を精査できる

デザインを見たうえで動かす場所を考えることも出来る先に言った完成図と動きをイメージすることでより柔軟な作り方ができる

逆の考え方もできる



Twenty Eleven テーマディレクトリの中身



Twenty Eleven テーマディレクトリの中身

( ﾟдﾟ)ﾎﾟｶｰﾝ･･･



忘れましょう。



WordPress Codex（http://wpdocs.sourceforge.jp/）の

http://wpdocs.sourceforge.jp/

http://wpdocs.sourceforge.jp/



テンプレート階層の項目の呼び出し順がわかりやすい。



ワイヤーフレームも大事３箇条の1番目

「完成図をイメージする」に通じます。



たぶんheader.php→

たぶんfooter.php→

←たぶんsidebar.php

共通のものはパーツで分割



Twenty Elevenのindex.php

<?get_header(); ?>

<div id="primary"> <div id="content" role="main">

<?php if ( have_posts() ) : ?>

<?php twentyeleven_content_nav( 'nav-above' ); ?>

<?php /* Start the Loop */ ?> <?php while ( have_posts() ) : the_post(); ?>

<?php get_template_part( 'content', get_post_format() ); ?>

<?php endwhile; ?>

<?php twentyeleven_content_nav( 'nav-below' ); ?>

<?php else : ?>

<article id="post-0" class="post no-results not-found"> <header class="entry-header"> <h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1> </header>

<div class="entry-content"> <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find arelated post.', 'twentyeleven' ); ?></p> <?php get_search_form(); ?> </div> </article>

<?php endif; ?>

</div> </div>

<?php get_sidebar(); ?><?php get_footer(); ?>



ここで呼び出しタグやループがあったりする。

<?get_header(); ?>

<div id="primary"> <div id="content" role="main">

<?php if ( have_posts() ) : ?>

<?php twentyeleven_content_nav( 'nav-above' ); ?>

<?php /* Start the Loop */ ?> <?php while ( have_posts() ) : the_post(); ?>

<?php get_template_part( 'content', get_post_format() ); ?>

<?php endwhile; ?>

<?php twentyeleven_content_nav( 'nav-below' ); ?>

<?php else : ?>

<article id="post-0" class="post no-results not-found"> <header class="entry-header"> <h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1> </header>

<div class="entry-content"> <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find arelated post.', 'twentyeleven' ); ?></p> <?php get_search_form(); ?> </div> </article>

<?php endif; ?>

</div> </div>

<?php get_sidebar(); ?><?php get_footer(); ?>

c



「WordPress テンプレートタグ」や「WordPress ループタグ」で検索！

詳しくは






カスタム投稿タイプで投稿を種類別に管理したい





カスタム投稿タイプ



投稿とは別の投稿のメニューを作ることができる


プラグインあります


Custom Post Type UIhttp://wordpress.org/extend/plugins/custom-post-type-ui/

http://wordpress.org/extend/plugins/custom-post-type-ui/

http://wordpress.org/extend/plugins/custom-post-type-ui/




CMS Presshttp://wordpress.org/extend/plugins/cms-press/

http://wordpress.org/extend/plugins/cms-press/

http://wordpress.org/extend/plugins/cms-press/

Typeshttp://wordpress.org/extend/plugins/types/




http://wordpress.org/extend/plugins/types/


function custom_post_type_eventinfo() { $labels = array( 'name' => _x('イベント情報', 'post type general name'), 'singular_name' => _x('イベント情報一覧', 'post type singular name'), 'add_new' => _x('新規追加', 'book'), 'add_new_item' => __('新規項目追加'), 'edit_item' => __('編集'), 'new_item' => __('項目編集'), 'view_item' => __('項目をプレビュー'), 'search_items' => __('項目を検索'), 'not_found' => __('項目はありません'), 'not_found_in_trash' => __('ゴミ箱に項目はありません'), 'parent_item_colon' => '' ); $args = array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'query_var' => true, 'rewrite' => true, 'has_archive' => true, 'capability_type' => 'post', 'hierarchical' => false, 'menu_position' => 4, 'supports' => array('title','editor') ); register_post_type('eventinfo',$args); } add_action('init', 'custom_post_type_eventinfo');



僕はfunctions.phpに書いちゃう人




custom_post_type_eventinfoで管理画面にメニューを追加する記述




eventinfoがカスタム投稿タイプの名前




そうだ、あとでアップされる資料を見てコピペしよう

または僕のブログ記事とか参照http://blog.gouten.net/article/my-wordpress-demo-tutorial/

ググるのもいいね！

http://blog.gouten.net/article/my-wordpress-demo-tutorial/




出力方法：シングルページ・アーカイブページ

ループタグは普通に書いてOK

single-「post_type名」.php

archive-「post_type名」.php



出力方法：シングルページ・アーカイブページ

今回はポストタイプeventinfoを入れる

single-「post_type名」.php

archive-「post_type名」.php



出力方法：カテゴリページとか

<?php $paged = get_query_var('paged'); query_posts( array( 'post_type' => 'eventinfo', 'posts_per_page' => 5, 'paged' => $paged ));?>

投稿タイプ名を入れる



出力方法：カテゴリ／アーカイブページ

<?php $paged = get_query_var('paged'); query_posts( array( 'post_type' => 'eventinfo', 'posts_per_page' => 5, 'paged' => $paged ));?><?php if(have_posts()): while(have_posts()): the_post(); ?><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><?php the_contant(); ?><?php endwhile; endif; ?>

ループタグの前に入れる



カスタム分類に関しては「WordPress カスタムタクソノミー」

で検索すれば多分わかる！






カスタムフィールドで更新を楽にしたい




カスタムフィールドで更新を楽にしたい本来はデモでやったところ

イベントページを作りたいとか思ったら

・主催者・団体の名前・日時・会場名・住所・参加費・お問い合わせ先メールアドレス・参加を受け付けているかどうかの判定

イベントページで必要な入力項目例



イベントページを作りたいとか思ったら

・主催者・団体の名前・日時・会場名・住所・参加費・お問い合わせ先メールアドレス・参加を受け付けているかどうかの判定

イベントページで必要な入力項目例 (‘A`)ﾏﾝﾄﾞｸｾ

そんなときにはカスタムフィールド



でも…



デフォルトは、よくワカンネ




カスタムフィールドテンプレートhttp://wordpress.org/extend/plugins/custom-field-template/

カスタムフィールドテンプレートに関しては僕のブログ記事とか参照http://blog.gouten.net/article/my-wordpress-demo-tutorial/

http://wordpress.org/extend/plugins/custom-field-template/

http://wordpress.org/extend/plugins/custom-field-template/






Typeshttp://wordpress.org/extend/plugins/types/





Advance Custom Fields奇跡のプラグイン

おすすめ

http://wordpress.org/extend/plugins/advanced-custom-fields/





ここからデモです



有効化するとメニューに「カスタムフィールド」が追加される



設定画面

フィールドグループを新規追加

ここから



設定画面

新規フィールド作成はここから



設定画面：フィールド追加



フィールドのラベル名を入力

任意の文字列でOK

実際の表示



フィールド名を入力

半角英数字で設定出力コードの記述で使用



フィールドタイプを設定

選べるオプション

テキストテキストエリアWysiwyg エディタ画像Numberセレクトボックスチェックボックス真/偽投稿オブジェクト関連デイトピッカーカラーピッカー

カスタムフィールドテンプレートでこのへんはあまり見かけない



フィールドの説明を入力

任意で入力

実際の表示

入れても入れなくてもOK



必須かどうかを選択

実際の表示



その他の設定

フィールドタイプによって項目が変わります(例)チェックボックスやラジオボタンだと選択肢が入力できるようになる等

…触ってみるのがいちばん早い


入れ替えもできる



カスタムフィールドの差し込み箇所設定


投稿タイプや特定のカテゴリー・タグ、特定の記事やユーザー等、さまざまな条件でカスタムフィールドを出す／出さないの設定ができる。


カスタムフィールドの差し込み箇所設定


カスタムフィールドのグループに枠（メタボックス）をつけるかつけないか

デフォルトのメタボックスを非表示にします

コンテンツエディタが非表示にできるのは神！


実際のメタボックスの表示(例の一部)



実際のメタボックスの表示(例の一部)







カスタムフィールドを自由に出力したい





おそらく最も簡単なカスタムフィールドの出力コード

<?php the_meta(); ?>

カスタムフィールドの値を普通に出力

<ul class='post-meta'><li><span class='post-meta-key'>今読んでいる本: </span> 星の王子様</li><li><span class='post-meta-key'>今日の天気:</span> 晴れ</li>

</ul>

引用：http://wpdocs.sourceforge.jp/カスタムフィールドの使い方

http://wpdocs.sourceforge.jp/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9




簡単なカスタムフィールドの出力コード

ここで入れたものがカスタムフィールドの”キー”になります

カスタムフィールドの値を普通にテンプレートに出力

Thanks for @jim912寄り道




<?php $key="キーの名前"; echo get_post_meta($post->ID, $key, true); ?>

カスタムフィールドの値を普通にテンプレートに出力

引用：http://wpdocs.sourceforge.jp/カスタムフィールドの使い方

<?php echo get_post_meta($post->ID, "キーの名前", true); ?>ちょっと省略

<?php echo esc_html(get_post_meta($post->ID, "キーの名前", true)); ?>

カスタムフィールドに入力した文字を表示させる場合、HTMLタグを表示する必要性がなければ esc_html でエスケープ処理をかけておくと、セキュリティホールを未然に防ぐことができます。

（※上記は一例です）



<?php echo wp_get_attachment_image(　　get_post_meta( $post->ID,'キーの名前',true), 'サイズ' ); ?>




カスタムフィールドでアップした画像を出力

wp_get_attachment_imageを応用

thumbnail / small / middle / large / full



カスタムフィールドの値で条件分岐

<?php if(get_post_meta($post->ID,'キーの名前',true)) : ?>　　出力したいもの<?php endif; ?>

<?php if(wp_get_attachment_image(　　get_post_meta( $post->ID,'キーの名前',true)) :?>　　出力したいもの<?php endif; ?>

入力されているかどうかで分岐

画像があるかどうかで分岐




こんなサイトも作れる

http://www.spacedrama.jp/micro_to_macro/







çç

テキストエリアで入力したものを出力







画像をアップしていれば表示していなければダミー画像を表示







çç

テキストエリアで入力すれば表示入力しなければ非表示







チェックボックスでチェックしていれば表示チェックしていなければ非表示








とりあえずまとめてみた





・いいものはどんどん真似て　構造をしっかり考えながらデザイン

・投稿を柔軟に分けて

・入力項目を固定して効率よく　更新できるようにつくる

適当にざっくりと超簡単にまとめ

見た目から入って

カスタム投稿

カスタムフィールド



（※個人の感想です）

これでだいたいできる！

できなかったらゴメンナサイ(́・ω:;.:...



フォーラムでも聞けるし！



WordPressいじると楽しいよ！

＼(ô^)／

つまり

ご清聴ありがとうござ……？

　　　　　　　　　　　　　　　　ヘ(ô^)ヘいいぜ　　　　　　　　　　　　　　　　　　　|∧ 　　　　　　　　　　　　　　　　　　　／　/　　　　　　　　　　　　　　 (ô^)／てめえが俺のセッションを　　　　　　　　　　　　　／( 　)　　　　終わりだって思ってるんなら　　　　　　(ô^) 三　　／　／＞　　　　　　　　　＼　　　　 (＼＼三　　　　　　　　　　　　　　(／o^)　　＜　＼三　　　　　　　　　　　　　　　　( ／　／く　まずはそのふざけた　　　　　　　　　　　　　　　　幻想をぶち殺す！！





番外編：登録サイトをつくってみたい

NEW!


登録サイトをつくってみたい





WordCamp Osaka 2012 登録ありがとう

登録者数1149人でした



WordCamp Osaka 2012 登録サイトの秘密

固定ページにログイン画面がある…だと…



Theme My Login

固定ページにログイン画面を置くことが可能になりますhttp://wordpress.org/extend/plugins/theme-my-login/

WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)

http://wordpress.org/extend/plugins/theme-my-login/

http://wordpress.org/extend/plugins/theme-my-login/



Theme My Login：固定ページの作成




Theme My Login：設定画面




通常のログイン画面




theme-my-login.cssで整形後




お気づきだろうか…

これ、なに？


http://wordpress.org/extend/plugins/gianism/



Gianism

FacebookやTwitterでサイト登録／ログインをできるようにします




TwitterアカウントでTwitter DevelopersにサインインしてAPIキーを作る


登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)

Developersサイトでアプリを作る

Facebookアカウントでfacebook DEVELOPERSにサインインしてアプリケーションをを作ります



Developersサイトでアプリを作る

各アプリケーションで取得したキーを項目に入力



Gianism：設定



ログイン画面に出力されます

ココが増える

ボタンはこのとおりには出ません。CSSで整形してください。


プロフィールに外部サービス連携項目が出現



Gianismプロフィール画面


functions.phpに以下のコードを記述

function remove_stats_action_hooks() {! if ( is_page('login') ) {! ! remove_action( 'wp_footer', 'stats_footer', 101 );! ! remove_action( 'wp_head', 'stats_add_shutdown_action' );! }}add_action( 'template_redirect', 'remove_stats_action_hooks', 9999 );



JstPackの統計情報で特定のページのアクセスを収集させないようにする

Thanks for @jim912

おまけ


素敵なログインページもできる！( `・ω・́)

WordPress 超楽しい！



ご清聴ありがとうございました


2012.11.03 - WordCamp Osaka 2012 GOUTEN（@gouten5010）

Documents

デザイン重視で構築するWordPressサイトのすゝめ 〜俺たちのやりたいことがWordPressでできないわけがない〜【セーフ！】

デザイン重視で構築するWordPressサイトのすゝめ〜俺たちのやりたいことがWordPressでできないわけがない〜【セーフ！】