Embed Size (px)
DESCRIPTION
WordCrub Fukui 2011.1.29
Citation preview
佐々木 敏明(@shirokuro331)2011.01.29 WordCrab Fukui 2011
Designer meets WordPress
デザイナー視点のWordPress
2011年1月29日土曜日
Introduction佐々木 敏明 Toshiaki Sasaki
福井県で働くWebデザイナー（株式会社サーフボード）
Progression, HTML5, jQueryに興味ありあり。勉強中。
もちろんWordPressも＞＜
twitter : @shirokuro331
facebook : shirokuro331
2011年1月29日土曜日
勉強会コミュニティ■WCAF Web Creators Association Fukui http://www.wcaf.jp
（サイトはWordPressで制作）
■.fukui自由に集まって勉強する会です。
テーマは一応決めるけど基本自由。
そのテーマを勉強しようと思ってる人たちが
集まってくれてるので、同じ悩みを相談
しやすい感じ。
2011年1月29日土曜日
WCAF Seminar vol.6 2011.04.09(sat)theme : smartphoneAndroid × iPhone × WindowsPhone7
2011年1月29日土曜日
Designer meetsWordPress
2011年1月29日土曜日
・無料
・ブログ（CMS）
・ファイル作らなくてもページ作れる
・管理、更新が楽
・プラグインたくさん = 簡単に機能を追加できる
WordPress is ...
2011年1月29日土曜日
そんなステキなWordPressでWebサイト作りましょう。
Let’s Create♪
デザインをカスタムして
2011年1月29日土曜日
Agenda準備 → デザイン変更 → サイト構築 → まとめ
2011年1月29日土曜日
Start
2011年1月29日土曜日
Windowsなら
XAMPP
MACなら
MAMP
ローカルで開発
※skype注意
http://www.mamp.info/en/index.html
http://www.apachefriends.org/jp/xampp-windows.html
2011年1月29日土曜日
WordPressゲット！
http://ja.wordpress.org/
2011年1月29日土曜日
XAMMP(or MAMP)を起動してphpMyAdminを開く任意のデータベース名を入力（wordpress）
DB作成
※画像はMAMP
win・・・http://127.0.0.1/phpmyadmin/
2011年1月29日土曜日
ダウンロードファイルを解凍して中身を下記フォルダへ移動する。
win ・・・ C:\xampp\htdocs\ mac ・・・ アプリケーション＞MAMP＞htdocs
※画像はmac
フォルダへ移動
2011年1月29日土曜日
●24行目あたり/** WordPress のデータベース名 */define(‘DB_NAME’, ‘putyourdbnamehere’);↓define(‘DB_NAME’, ‘wordpress‘);
●26行目あたり/** MySQL のユーザー名 */define(‘DB_USER’, ‘usernamehere’);↓define(‘DB_USER’, ‘root‘);
●29行目あたり/** MySQL のパスワード */define(‘DB_PASSWORD’, ‘yourpasswordhere’);↓define(‘DB_PASSWORD’, ‘root‘);
記述の変更
wp-config-sample.php ↓wp-config.php
htdocs内のファイルを修正
先ほど入力したデータベース名
2011年1月29日土曜日
インストール
mac・・・http://localhost:8888/wordpress/wp-admin/install.php
win・・・http://127.0.0.1/wordpress/
上記URLにアクセスして必要情報を入力していく。2011年1月29日土曜日
オワタ＼(^o^)／
インストール完了♪楽々簡単。
2011年1月29日土曜日
サーバーも同じ
・PHP バージョン 4.3 以上・MySQL バージョン 4.1.2 以上
※WordPressが動くサーバー環境
2011年1月29日土曜日
デザイン変更しよう
Design2011年1月29日土曜日
404.php
archive.php
attachment.php
author.php
category.php
comments.php
editor-style-rtl.css
editor-style.css
footer.php
function.php
header.php
/images
index.php
license.txt
/languages
loop.php
onecolumn-page.php
page.php
rtl.css
screenshot.png
search.php
sedebar-footer.php
sidebar.php
single.php
style.css
tag.php /twentyten/2011年1月29日土曜日
初期デザイン2011年1月29日土曜日
include file
loop.php
sidebar.php
header.php
footer.php2011年1月29日土曜日
404.php
archive.php
attachment.php
author.php
category.php
comments.php
editor-style-rtl.css
editor-style.css
footer.phpfunction.php
header.php/images
index.php
license.txt
/languages
loop.phponecolumn-page.php
page.php
rtl.css
screenshot.png
search.php
sedebar-footer.php
siіdebar.phpsingle.php
style.csstag.php
基本的にこれらのファイルを変更すればOK（アーカイブページとか個別ページは別ファイル）
2011年1月29日土曜日
子テーマ作ろう
children2011年1月29日土曜日
WordPressの子テーマとは、別のテーマ（親テーマ）の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。（Codexより）
子テーマ
2011年1月29日土曜日
親テーマのデザインや機能をそのままにしつつ、編集したいところだけを編集できる。
メリット
（親テーマを元に作れるので作業時間短縮）
色が違う同じサイト作るときに便利
デフォルトテーマにすぐ戻せる
2011年1月29日土曜日
効率よくデザインを変更できる
いいね！
x
2011年1月29日土曜日
How to/wp-content/themes/に任意のディレクトリを作成し、親テーマのstyle.cssをコピペ。
twentyten（親テーマ）
/wp-content/themes/
hogehoge（任意）
新規作成
2011年1月29日土曜日
How tostyle.css内の記述を一部変更。
/*Theme Name: 子テーマ名Theme URI: 子テーマURLDescription: 子テーマの説明Author: 子テーマの作者Author URI: 子テーマ作者のURLTemplate: 親テーマのディレクトリ名Version: 子テーマのバージョン*/
2011年1月29日土曜日
How toこれだけの記述でもOK :-)
/*Theme Name: 子テーマ名Template: 親テーマのディレクトリ名*/
2011年1月29日土曜日
How toこんな感じにしよう。これで子テーマの出来上がり。
/*Theme Name: hogehogeTemplate: twentyten*/
2011年1月29日土曜日
How toあとは親テーマ（twentyten）から変更したいファイルをコピペして編集するだけ。
twentyten（親テーマ）
/wp-content/themes/
hogehoge（小テーマ）
header.php
2011年1月29日土曜日
デザインの変更はソースコードからクラス名とかコメント調べてphpファイルとかcssファイル触ってます
2011年1月29日土曜日
サイト作ろう
Web site2011年1月29日土曜日
sitemapHOME 事業内容
実績紹介
会社案内 企業理念
会社概要
お問い合わせ
2011年1月29日土曜日
ページの追加
2011年1月29日土曜日
内容を入力
1カラムにもできる
2011年1月29日土曜日
メニュー作成
1
2
3 メニューの名前
メインナビゲーションに設定
2011年1月29日土曜日
メニューの順番
ページの階層、順番をならべる
2011年1月29日土曜日
フロントページ設定
ブログページ以外をフロントページにできる
2011年1月29日土曜日
枠完成
Play Customize2011年1月29日土曜日
プラグイン入れよう
Plug in2011年1月29日土曜日
WordPressの機能を拡張するためのツールです。
プラグイン
2011年1月29日土曜日
Contact Form 7
シンプルで高機能な
お問い合わせフォーム
2011年1月29日土曜日
パンくずリスト
Breadcrumb NavXT
2011年1月29日土曜日
Ktai Style WPtouch
モバイル対応
2011年1月29日土曜日
Akismet
All in One SEO Pack
WP Super Cache
WP Zen-coding
MoreLink#remove
flickrRSS
WP-PageNavi
Similar Posts
Google XML Sitemaps
and more & more ...
他にも たくさん！
2011年1月29日土曜日
魔法の言葉『PHP』
PHP2011年1月29日土曜日
<?php /* How to display posts in the Gallery category. */ ?>
<?php if ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) : ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="entry-meta"> <?php twentyten_posted_on(); ?> </div><!-- .entry-meta -->
<div class="entry-content"><?php if ( post_password_required() ) : ?> <?php the_content(); ?><?php else : ?> <?php $images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) ); if ( $images ) : $total_images = count( $images ); $image = array_shift( $images ); $image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' ); ?> <div class="gallery-thumb"> <a class="size-thumbnail" href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a> </div><!-- .gallery-thumb -->
loop.php
2011年1月29日土曜日
<?php /* How to display posts in the Gallery category. */ ?>
<?php if ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) : ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="entry-meta"> <?php twentyten_posted_on(); ?> </div><!-- .entry-meta -->
<div class="entry-content"><?php if ( post_password_required() ) : ?> <?php the_content(); ?><?php else : ?> <?php $images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) ); if ( $images ) : $total_images = count( $images ); $image = array_shift( $images ); $image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' ); ?> <div class="gallery-thumb"> <a class="size-thumbnail" href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a> </div><!-- .gallery-thumb -->
loop.php
なんぞこれ（・ω・）?
2011年1月29日土曜日
Codex http://wpdocs.sourceforge.jp/2011年1月29日土曜日
Ending
2011年1月29日土曜日
WordPressがあれば効率よくサイトを作れる。
プラグイン使えばプログラミング苦手な人でもフォーム等の機能を導入できる。
ローカルに開発環境作って作業しよう。
テーマのカスタマイズは子テーマで。
2011年1月29日土曜日
WordPressって楽しい！＞＜
2011年1月29日土曜日
Let's enjoy!
WordPressのおかげでカニが食べれるし。
ｖ[ﾟ∀ﾟ]v 三
2011年1月29日土曜日
Spesial thanx!!
Windows ローカル環境構築 http://hp.prismnium.net/xampp.html http://hp.prismnium.net/wordpress.html
Mac ローカル環境構築 http://www.studio-fix.com/blog/kaoru/2010/01/27/post875/
子テーマの作り方 http://9jp.info/archives/1507
Twentytenについて http://www.slideshare.net/hokori3/wordpress30-twenty-ten
2011年1月29日土曜日
佐々木 敏明(@shirokuro331)2011.01.29 WordCrab Fukui 2011
Thank you!
ご清聴ありがとうございました！
2011年1月29日土曜日
