WordPress 講 習 (6) 株 式 会 社 コミュニティコム 星 野 邦 敏 115-0045 東 京 都 北 区 赤 羽 1-59-9 ネスト 赤 羽 201 URL: http://www.communitycom.jp/ E-MAIL: mail@communitycom.jp 1
WordPress 講 習 はじめに 対 象 者 WordPressをインストールしたことが 無 い 人 WordPressをインストールしたけど 使 い 方 がよく 分 からない 人 10コマ 修 了 時 のゴール WordPressで 何 が 出 来 るのかを 把 握 する WordPressを 使 って サイトを 制 作 & 運 営 できるようになる WordPressを 使 って WEBサービスが 作 れるようになる 2
WordPress 講 習 目 次 1コマ: WordPressについて& 制 作 事 例 &インストール 2コマ: インストールの 続 き& 管 理 画 面 の 使 い 方 & 投 稿 する 3コマ: 既 存 のテーマを 入 れる 4コマ: 既 存 のプラグインを 入 れる 5コマ: Twitter 連 携 サービスを 作 ってみる 3
WordPress 講 習 目 次 6コマ: 1 日 目 の 復 習 & テーマをカスタマイズする 7コマ: HTMLベースをWPテーマに 変 える 8コマ: CMSとして 企 業 サイトを 作 る& 携 帯 サイトを 作 る 9コマ: マルチサイト 化 して 複 数 ブログ 運 営 10コマ: WPの 情 報 の 調 べ 方 や 勉 強 会 サイト 運 営 で 広 告 収 入 を 得 る 4
WordPress 講 習 目 次 6コマ 目 テーマをカスタマイズする 5
6コマ 目 のゴール WordPressの 既 存 のテーマを 入 れるだけでなく 自 分 でオリジナルテーマを 作 って 自 分 だけのWEBデザインで WordPressに 動 かせるようになる 6
テーマとは? WEBデザインを 変 えるためのモノ ブログの 着 せ 替 え 見 た 目 の 調 整 だけでなく 表 示 する 内 容 を 操 ることもできます 7
テーマフォルダの 確 認 wp-admin / wp-content / wp-includes / index.php license.txt readme-ja.html readme.html wp-activate.php wp-app.php wp-atom.php languages / plugins / themes / upgrade / uploads / index.php twentyten / index.php ココに テーマフォルダ を 入 れる! 8
デフォルトテーマ Twenty Ten のファイル 構 成 images / languages / 404.php archive.php attachment.php author.php category.php comments.php editor-style.css editor-style-rtl.css footer.php functions.php header.php index.php license.txt loop.php loop-attachment.php loop-page.php loop-single.php onecolumn-page.php page.php rtl.css screenshot.png search.php sidebar.php sidebar-footer.php single.php style.css tag.php 9
最 低 限 必 要 なテーマのファイル 構 成 index.php style.css 10
style.css style.cssの 始 めに 以 下 を 書 くと テーマとして 認 識 されます /* Theme Name: 自 分 のテーマ 名 Theme URI: テーマのホームサイトのURL Description: テーマの 説 明 Author: 作 者 である 自 分 の 名 前 Author URI: 作 者 である 自 分 のサイトのURL Version: バージョン( 任 意 ) Tags: タグ( 任 意 ) */ 11
screenshot.png screenshot.pngを 入 れておくと 管 理 画 面 のテーマに キャプチャ 画 像 が 表 示 されます 公 式 テーマではサイトの キャプチャが 一 般 的 ですが 会 社 のロゴなど 何 でも 可 能 です 画 像 サイズは 横 300px 縦 225pxで 作 ると ちょうど 良 くなります 12
テーマのカスタマイズに 必 要 な 知 識 WordPressテンプレートタグ http://wpdocs.sourceforge.jp/テンプレートタグ WordPress 条 件 分 岐 タグ http://wpdocs.sourceforge.jp/conditional_tags HTML CSS PHP MySQL 13
テーマのファイル 適 用 の 優 先 順 位 ページの 種 類 第 1 位 第 2 位 第 3 位 第 4 位 第 5 位 メインページ 静 的 フロントページ home.php index.php 投 稿 ページ single- 投 稿 タイプ.php single.php index.php 固 定 ページ page-スラッグ 名.php page-id.php page.php index.php カテゴリーページ category-スラッグ 名.php category-id.php category.php archive.php index.php タグページ tag-スラッグ 名.php tag-id.php tag.php archive.php index.php カスタム 分 類 ページ taxonoy- 分 類 名 -スラッ グ 名.php taxonoy- 分 類 名.php taxonomy.php archive.php index.php ユーザーページ author-ユーザー 名.php author-ユーザーid.php author.php archive.php index.php 日 付 別 ページ date.php archive.php index.php 検 索 ページ search.php archive.php index.php 404ページ 404.php index.php 添 付 ファイルページ MIME_TYPE.php attachment.php archive.php index.php MIME_TYPE.phpとは image.php video.php audio.php application.phpなどファイルに 応 じたテンプレートページ 14
ブログサイト 名 <?php bloginfo( name );?> ブログURL <?php bloginfo( url');?> 記 事 のタイトルを 表 示 <?php the_title();?> 記 事 の 本 文 を 表 示 <?php the_content();?> テーマをカスタマイズする WordPressテンプレートタグの 具 体 例 投 稿 日 付 を 表 示 <?php the_time("y 年 n 月 j 日 ");?> 投 稿 のURL <?php the_permalink();?> カスタムフィールドの 値 を 表 示 <?php echo get_post_meta($post->id, 値 ',true);?> コメントを 表 示 使 用 中 のテーマのCSS <?php wp_list_comments();?> <?php bloginfo( stylesheet_url ');?> 15
WordPress 条 件 分 岐 タグの 具 体 例 トップページとその 他 のページで 表 示 させるものを 変 える <?php if ( is_home() is_front_page() ) :?> トップページに 表 示 させたいコンテンツ(PHPまたはHTML) <?php else :?> トップページ 以 外 に 表 示 させたいコンテンツ(PHPまたはHTML) <?php endif;?> 16
応 用 編 ( Twenty Ten loop-page.phpで 解 説 ) <?php if ( have_posts() ) while ( have_posts() ) : the_post();?> <div id="post-<?php the_id();?>" <?php post_class();?>> <?php if ( is_front_page() ) {?> <h2 class="entry-title"><?php the_title();?></h2> <?php } else {?> <h1 class="entry-title"><?php the_title();?></h1> <?php }?> <div class="entry-content"> <?php the_content();?> <?php wp_link_pages( array( 'before' => '<div class="page-link">'. ( 'Pages:', 'twentyten' ), 'after' => '</div>' ) );?> <?php edit_post_link( ( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' );?> </div><!--.entry-content --> </div><!-- #post-## --> <?php comments_template( '', true );?> <?php endwhile; // end of the loop.?> 17
応 用 編 ( 新 着 5 件 をカテゴリ 別 に 表 示 ) <div id="topcat1"> <?php $my_query = new WP_Query(array( 'cat' => 1, 'posts_per_page' => 5, 'orderby' => 'date', 'order' => 'DESC' ));?> <ul> <?php while($my_query->have_posts()) : $my_query->the_post();?> <li><b><?php the_time("y 年 n 月 j 日 ");?></b> <a href="<?php the_permalink();?>"><?php the_title();?></a></li> <?php endwhile;?> </ul> </div><!-- #topcat1 --> <div class="top-right"> <a href="<?php echo home_url( '/' );?>category/news/"> 今 までのNews 一 覧 </a></div> 18
ページテンプレート 固 定 ページでWEBデザインを 切 り 替 えるページテンプレートを 作 る 場 合 新 規 にphpファイルを 作 り 始 めに 以 下 を 書 くと ページテンプレートとして 認 識 されます <?php /* Template Name: ページテンプレート 名 */?> 19
ページテンプレート 固 定 ページの ページ 属 性 に テンプレート が 追 加 されて 切 り 替 えることが 可 能 になります 20
完 成 したテーマはthemesフォルダに 入 れる wp-admin / wp-content / wp-includes / index.php license.txt readme-ja.html readme.html wp-activate.php wp-app.php wp-atom.php languages / plugins / themes / upgrade / uploads / index.php twentyten / index.php ココに テーマフォルダを 新 規 に 作 って 入 れる! 21
完 成 したテーマはthemesフォルダに 入 れる 管 理 画 面 に 新 しくテーマが 追 加 されます その 後 有 効 化 すると WordPressにWEBデザインが 反 映 されます 22