デザイン重視で構築するwordpressサイトのすゝめ...
DESCRIPTION
WordCamp Osaka 2012で「デザイン重視で構築するWordPressサイトのすゝめ 〜俺たちのやりたいことがWordPressでできないわけがない〜」というセッションにて登壇した資料です。 当日はデモとしてブラウザで操作した部分のあるため、それを加えたものになります。 コードで見にくい部分に関してはブログ [ http://blog.gouten.net/ ] にて補填いたします。 なお、焼き直しした部分があるため、以前アップロードした「うぇぶろっこりーに学ぶサイト構築と言う名の悪巧み」は削除させていただきました。TRANSCRIPT
デザイン重視で構築するWordPressサイトのすゝめ セーフ
!
2012.11.03 - WordCamp Osaka 2012
このスライドはWordCamp Osaka 2012のセッションで実際に披露した内容に当日デモで動かした部分を加え、危ない橋を渡らないように改変を加えたものです
GOUTEN(@gouten5010)
お前誰やねん
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
自己紹介
Webデザイナーとかフロントエンジニアとか
小劇場系の舞台まわりでも活動中
gouten5010
GOUTEN普段は某IT企業の社畜
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
自己紹介
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
自己紹介 - 自分のサイト
http://blog.gouten.netGOUTEN.NET
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
自己紹介 - 自分のサイト
一時閉鎖中5010 WORKS
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
自己紹介 - 悪巧みサイト
稼働準備中うぇぶろっこりー協会
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
自己紹介
稼働準備中属性:IT土方
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
自己紹介 - WordCamp Osaka 2012 実行委員ですが何か
主にCSSでデザインカスタマイズしましたWordCamp Osaka 2012 公式サイト
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
自己紹介 - WordCamp Osaka 2012 実行委員ですが何か
デザイン・構築全般をしましたWordCamp Osaka 2012 登録サイト
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
自己紹介 - WordCamp Osaka 2012 実行委員ですが何か
デザイン・構築全般にWordCamp Osaka 2012 登録サイト
特に力入れた
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
自己紹介 - いますぐフォロー
@gouten5010
www.facebook.com/gouten5010
ソーシャルアカウント
GOUTEN
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
自己紹介
gouten5010
Webデザイナーとかフロントエンジニアとか
小劇場系の舞台まわりでも活動中普段は某IT企業の社畜よろしくな!
アジェンダ
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
一体お前は何をやりたいんだ
デザイン重視っていったいどういうことなの…第1話:
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
一体お前は何をやりたいんだ
第2話:第3話:第3.5話:最終話:
カスタム投稿タイプで投稿を種類別に管理したいカスタムフィールドで更新を楽にしたいカスタムフィールドを自由に出力したいとりあえずまとめてみた
デザイン重視っていったいどういうことなの…第1話:
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
第2話:第3話:第3.5話:最終話:
カスタム投稿タイプで投稿種類別にを管理したいカスタムフィールドで更新を楽にしたいカスタムフィールドを自由に出力したいとりあえずまとめてみた
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
(個人差があります)
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
WordPressは
はやい
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
(個人差があります)
WordPressは
やすい
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
(個人差があります)
WordPressは
うまい
WordPressは「はやい」「やすい」「うまい」
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
・比較的簡単にインストールできて
・そんなに初期コストかからなくて
・あわよくば儲けることも出来る
はやい
やすい
うまい
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
どうせやるなら良いデザインがいい
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
・良いテーマが見つからない。
・コストを抑えたいけど 外注したくない。
GOUTEN的、デザインできないと思っている人が悩みがち!(偏見含む)
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
マリーアントワネットも言ってた(ウソです)
思ったようなテーマがなければ作ればいいじゃない
・完成図をイメージする・完全オリジナルにしない・どういう動きになるかを 考える
GOUTEN的デザイン3箇条
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
完成図をイメージする
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
ワイヤーフレームの作成が重要どこに何を配置するかということを考えることでサイト訪問者の動線も考えることができ、ユーザビリティの向上になる
方向性が見えていることでコーディング時に迷わない
サイト制作の目標が見えているので、早い
完全オリジナルにしない
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
「全くのオリジナルデザイン」を目指しがちの人は(そうでない人はごめんなさい)
まずは パクりましょう真似することは恥ではないWebサイトに限らず、自分が見て「いいな」と思ったものはどんどん真似していくことで、自分のスキルは確実に上がる
※真似するときは敬意を持って※ライセンス等には気をつけましょう
どういう動きになるかを考える
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
投稿やカスタムフィールド、またプラグインやfunctions.php等で設定するものがどういう出力をしてどういう動きをするかを把握することで、デザイン時に配置する項目や表示の方法を精査できる
デザインを見たうえで動かす場所を考えることも出来る先に言った完成図と動きをイメージすることでより柔軟な作り方ができる
逆の考え方もできる
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
Twenty Eleven テーマディレクトリの中身
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
Twenty Eleven テーマディレクトリの中身
( ゚д゚)ポカーン・・・
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
忘れましょう。
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
WordPress Codex(http://wpdocs.sourceforge.jp/)の
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
テンプレート階層の項目の呼び出し順がわかりやすい。
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
ワイヤーフレームも大事3箇条の1番目
「完成図をイメージする」に通じます。
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
たぶんheader.php→
たぶんfooter.php→
←たぶんsidebar.php
共通のものはパーツで分割
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
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><!-- .entry-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><!-- .entry-content --> </article><!-- #post-0 -->
<?php endif; ?>
</div><!-- #content --> </div><!-- #primary -->
<?php get_sidebar(); ?><?php get_footer(); ?>
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
ここで呼び出しタグやループがあったりする。
<?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><!-- .entry-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><!-- .entry-content --> </article><!-- #post-0 -->
<?php endif; ?>
</div><!-- #content --> </div><!-- #primary -->
<?php get_sidebar(); ?><?php get_footer(); ?>
c
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…
「WordPress テンプレートタグ」や「WordPress ループタグ」で検索!
詳しくは
デザイン重視っていったいどういうことなの…第1話:
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
第2話:第3話:第3.5話:最終話:
カスタム投稿タイプで投稿を種類別に管理したいカスタムフィールドで更新を楽にしたいカスタムフィールドを自由に出力したいとりあえずまとめてみた
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタム投稿タイプで投稿を種類別に管理したい
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタム投稿タイプで投稿を種類別に管理したい
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタム投稿タイプで投稿を種類別に管理したい
カスタム投稿タイプ
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタム投稿タイプで投稿を種類別に管理したい
投稿とは別の投稿のメニューを作ることができる
カスタム投稿タイプで投稿を種類別に管理したい
プラグインあります
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
Custom Post Type UIhttp://wordpress.org/extend/plugins/custom-post-type-ui/
カスタム投稿タイプで投稿を種類別に管理したい
プラグインあります
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
CMS Presshttp://wordpress.org/extend/plugins/cms-press/
Typeshttp://wordpress.org/extend/plugins/types/
カスタム投稿タイプで投稿を種類別に管理したい
プラグインあります
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
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');
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタム投稿タイプで投稿を種類別に管理したい
僕はfunctions.phpに書いちゃう人
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');
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタム投稿タイプで投稿を種類別に管理したい
custom_post_type_eventinfoで管理画面にメニューを追加する記述
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');
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタム投稿タイプで投稿を種類別に管理したい
eventinfoがカスタム投稿タイプの名前
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');
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタム投稿タイプで投稿を種類別に管理したい
そうだ、あとでアップされる資料を見てコピペしよう
または僕のブログ記事とか参照http://blog.gouten.net/article/my-wordpress-demo-tutorial/
ググるのもいいね!
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタム投稿タイプで投稿を種類別に管理したい
出力方法:シングルページ・アーカイブページ
ループタグは普通に書いてOK
single-「post_type名」.php
archive-「post_type名」.php
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタム投稿タイプで投稿を種類別に管理したい
出力方法:シングルページ・アーカイブページ
今回はポストタイプeventinfoを入れる
single-「post_type名」.php
archive-「post_type名」.php
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタム投稿タイプで投稿を種類別に管理したい
出力方法:カテゴリページとか
<?php $paged = get_query_var('paged'); query_posts( array( 'post_type' => 'eventinfo', 'posts_per_page' => 5, 'paged' => $paged ));?>
投稿タイプ名を入れる
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタム投稿タイプで投稿を種類別に管理したい
出力方法:カテゴリ/アーカイブページ
<?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サイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタム投稿タイプで投稿を種類別に管理したい
カスタム分類に関しては「WordPress カスタムタクソノミー」
で検索すれば多分わかる!
デザイン重視っていったいどういうことなの…第1話:
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
第2話:第3話:第3.5話:最終話:
カスタム投稿タイプで投稿を種類別に管理したいカスタムフィールドで更新を楽にしたいカスタムフィールドを自由に出力したいとりあえずまとめてみた
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい 本来はデモでやったところ
イベントページを作りたいとか思ったら
・主催者・団体の名前 ・日時 ・会場名・住所 ・参加費・お問い合わせ先メールアドレス・参加を受け付けているかどうかの判定
イベントページで必要な入力項目例
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい 本来はデモでやったところ
イベントページを作りたいとか思ったら
・主催者・団体の名前 ・日時 ・会場名・住所 ・参加費・お問い合わせ先メールアドレス・参加を受け付けているかどうかの判定
イベントページで必要な入力項目例 (‘A`)マンドクセ
そんなときにはカスタムフィールド
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい
でも…
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい
デフォルトは、よくワカンネ
カスタムフィールドで更新を楽にしたい
プラグインあります
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドテンプレートhttp://wordpress.org/extend/plugins/custom-field-template/
カスタムフィールドテンプレートに関しては僕のブログ記事とか参照http://blog.gouten.net/article/my-wordpress-demo-tutorial/
カスタムフィールドで更新を楽にしたい
プラグインあります
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
Typeshttp://wordpress.org/extend/plugins/types/
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい
Advance Custom Fields奇跡のプラグイン
おすすめ
http://wordpress.org/extend/plugins/advanced-custom-fields/
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい
ここからデモです
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい 本来はデモでやったところ
有効化するとメニューに「カスタムフィールド」が追加される
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい 本来はデモでやったところ
設定画面
フィールドグループを新規追加
ここから
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい 本来はデモでやったところ
設定画面
新規フィールド作成はここから
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい 本来はデモでやったところ
設定画面:フィールド追加
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい 本来はデモでやったところ
フィールドのラベル名を入力
任意の文字列でOK
実際の表示
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい 本来はデモでやったところ
フィールド名を入力
半角英数字で設定出力コードの記述で使用
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい 本来はデモでやったところ
フィールドタイプを設定
選べるオプション
テキストテキストエリアWysiwyg エディタ画像Numberセレクトボックスチェックボックス真/偽投稿オブジェクト関連デイトピッカーカラーピッカー
カスタムフィールドテンプレートでこのへんはあまり見かけない
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい 本来はデモでやったところ
フィールドの説明を入力
任意で入力
実際の表示
入れても入れなくてもOK
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい 本来はデモでやったところ
必須かどうかを選択
実際の表示
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい 本来はデモでやったところ
その他の設定
フィールドタイプによって項目が変わります(例)チェックボックスやラジオボタンだと選択肢が入力できるようになる等
…触ってみるのがいちばん早い
カスタムフィールドで更新を楽にしたい 本来はデモでやったところ
入れ替えもできる
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい 本来はデモでやったところ
カスタムフィールドの差し込み箇所設定
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
投稿タイプや特定のカテゴリー・タグ、特定の記事やユーザー等、さまざまな条件でカスタムフィールドを出す/出さないの設定ができる。
カスタムフィールドで更新を楽にしたい 本来はデモでやったところ
カスタムフィールドの差し込み箇所設定
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドのグループに枠(メタボックス)をつけるかつけないか
デフォルトのメタボックスを非表示にします
コンテンツエディタが非表示にできるのは神!
カスタムフィールドで更新を楽にしたい 本来はデモでやったところ
実際のメタボックスの表示(例の一部)
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい 本来はデモでやったところ
実際のメタボックスの表示(例の一部)
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視っていったいどういうことなの…第1話:
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
第2話:第3話:第3.5話:最終話:
カスタム投稿タイプで投稿を種類別に管理したいカスタムフィールドで更新を楽にしたいカスタムフィールドを自由に出力したいとりあえずまとめてみた
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドを自由に出力したい
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドを自由に出力したい
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドを自由に出力したい
おそらく最も簡単な カスタムフィールドの出力コード
<?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/カスタムフィールドの使い方
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドを自由に出力したい
簡単なカスタムフィールドの出力コード
ここで入れたものがカスタムフィールドの”キー”になります
カスタムフィールドの値を普通にテンプレートに出力
Thanks for @jim912寄り道
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドを自由に出力したい
簡単なカスタムフィールドの出力コード
<?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), 'サイズ' ); ?>
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドを自由に出力したい
簡単なカスタムフィールドの出力コード
カスタムフィールドでアップした画像を出力
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; ?>
入力されているかどうかで分岐
画像があるかどうかで分岐
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドを自由に出力したい
こんなサイトも作れる
http://www.spacedrama.jp/micro_to_macro/
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドを自由に出力したい
こんなサイトも作れる
http://www.spacedrama.jp/micro_to_macro/
çç
テキストエリアで入力したものを出力
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドを自由に出力したい
こんなサイトも作れる
http://www.spacedrama.jp/micro_to_macro/
画像をアップしていれば表示していなければダミー画像を表示
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドを自由に出力したい
こんなサイトも作れる
http://www.spacedrama.jp/micro_to_macro/
çç
テキストエリアで入力すれば表示入力しなければ非表示
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドを自由に出力したい
こんなサイトも作れる
http://www.spacedrama.jp/micro_to_macro/
チェックボックスでチェックしていれば表示チェックしていなければ非表示
デザイン重視っていったいどういうことなの…第1話:
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
第2話:第3話:第3.5話:最終話:
カスタム投稿タイプで投稿を種類別に管理したいカスタムフィールドで更新を楽にしたいカスタムフィールドを自由に出力したいとりあえずまとめてみた
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
とりあえずまとめてみた
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
とりあえずまとめてみた
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
とりあえずまとめてみた
・いいものはどんどん真似て 構造をしっかり考えながらデザイン
・投稿を柔軟に分けて
・入力項目を固定して効率よく 更新できるようにつくる
適当にざっくりと超簡単にまとめ
見た目から入って
カスタム投稿
カスタムフィールド
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
とりあえずまとめてみた
(※個人の感想です)
これでだいたいできる!
できなかったらゴメンナサイ(́・ω:;.:...
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
とりあえずまとめてみた
フォーラムでも聞けるし!
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
とりあえずまとめてみた
WordPressいじると楽しいよ!
\(^o^)/
つまり
ご清聴ありがとうござ……?
ヘ(^o^)ヘ いいぜ |∧ / / (^o^)/ てめえが俺のセッションを /( ) 終わりだって思ってるんなら (^o^) 三 / / > \ (\\ 三 (/o^) < \ 三 ( / / く まずはそのふざけた 幻想をぶち殺す!!
デザイン重視っていったいどういうことなの…第1話:
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
第2話:第3話:第3.5話:最終話:
カスタム投稿タイプで投稿を種類別に管理したいカスタムフィールドで更新を楽にしたいカスタムフィールドを自由に出力したいとりあえずまとめてみた
番外編: 登録サイトをつくってみたい
NEW!
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい
WordCamp Osaka 2012 登録ありがとう
登録者数1149人でした
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい
WordCamp Osaka 2012 登録サイトの秘密
固定ページにログイン画面がある…だと…
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい
Theme My Login
固定ページにログイン画面を置くことが可能になりますhttp://wordpress.org/extend/plugins/theme-my-login/
WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい
Theme My Login:固定ページの作成
WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい
Theme My Login:設定画面
WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい
通常のログイン画面
WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい
theme-my-login.cssで整形後
WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい
お気づきだろうか…
これ、なに?
WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)
http://wordpress.org/extend/plugins/gianism/
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい
Gianism
FacebookやTwitterでサイト登録/ログインをできるようにします
WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)
TwitterアカウントでTwitter DevelopersにサインインしてAPIキーを作る
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)
Developersサイトでアプリを作る
Facebookアカウントでfacebook DEVELOPERSにサインインしてアプリケーションをを作ります
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)
Developersサイトでアプリを作る
各アプリケーションで取得したキーを項目に入力
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)
Gianism:設定
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい
ログイン画面に出力されます
ココが増える
ボタンはこのとおりには出ません。CSSで整形してください。
WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)
プロフィールに外部サービス連携項目が出現
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい
Gianismプロフィール画面
WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)
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 );
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい
JstPackの統計情報で特定のページのアクセスを収集させないようにする
Thanks for @jim912
おまけ
WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)
素敵なログインページもできる!( `・ω・́)
WordPress 超楽しい!
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい
ご清聴ありがとうございました
デザイン重視で構築するWordPressサイトのすゝめ俺達のやりたいことがWordPressでできないわけがない
2012.11.03 - WordCamp Osaka 2012 GOUTEN(@gouten5010)