Upload
kenji-goto
View
883
Download
1
Embed Size (px)
DESCRIPTION
2014.10.24 コワーキングスペース茅場町Co-Edo 第15回ゼロから始めるWordPress勉強会〜「テーマをカスタマイズしてみる!」&懇親会〜
Citation preview
自己紹介Evangelist 04
よつばデザイン 後藤賢司
東京と大分の2拠点で活動中。
出版社~デザイン会社~Web制作会社~企画会社~独立。
根っこから考えるタイプのお仕事が得意。
ブランド立ち上げ、メディアサイトの企画・運営など。
企業Webサイトの企画・デザイン。
WP-D グリーン
CPIエバンジェリスト
ゼロから始めるWordPress勉強会 (facebookグループ)
Webクリエイターのための情報交換所 (facebookグループ)
Webクリエイターズニュース
すみだクリエイターズクラブ
活動
著書
プログラムが出来ない人にとって
WordPressのカスタマイズは
難易度が高い…
少しずつ覚えていく全部理解出来なくても良い。
おさえておけば良いポイントを
覚えておくとこの先幸せ。
見た目はHTMLかCSS、
機能はPHPの場合が多い。
テーマカスタマイズへのステップ1.テーマとCSSを理解する
2.PHPの基礎を理解する
3.テンプレート構造を理解する
4.テンプレートタグを理解する
カスタマイズに関して公式ディレクトリ掲載テーマは書き換えない。
コアファイルを書き換えない。(wp-content以外のファイル)
アップデートで消える。
テーマアップデートに注意
テンプレートを触らないカスタマイズWordPressのテンプレートはCSSをたくさん吐き出す。
CSSをカスタマイズして見た目を変える。
ブラウザでカスタマイズテンプレートファイルはいじらずに
CSSでなんとかする。
テンプレートタグWordPress独自のテンプレートタグには
CSSを出力するものもある。
!
例:<?php post_class(); ?>
テンプレートタグとCSS<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
↓
<article id="post-18" class="post-18 post type-post
status-publish format-standard hentry category-
uncategorized”>
idやカテゴリーなどいろんなCSSが適用される。
開発ツールでCSSカスタマイズCSSだけでカスタマイズしていく事が可能。
Jetpack多機能なプラグイン。
CSS編集が出来るようになる。
https://wordpress.org/
plugins/jetpack/
カスタムCSSカスタムCSSの機能を使う。
利用テーマに影響しないので
アップデートなどで
消える事がない。
ブラウザの開発ツールを使う変化を確認しながら、
作業が出来る。
※リロードすると消えます。
変更したCSSをコピー。
CSS編集変更したものを追加して
保存するだけ。
ボタンの色反映
テンプレートのカスタマイズwp-content/themes/(自分の使ってるテーマ名)
確認する方法
wp-content/themes/(自分の使ってるテーマ名)/style.cssに記述
style.cssTheme Name: テーマのタイトル
Theme URI: テーマのアドレス
Description: テーマの説明
Version: テーマのバージョン
Author: テーマ作成者
Author URI: テーマ作成者のアドレス
Tags: テーマのタグ
• /*
• Theme Name: Minamaze
• Theme URI: http://www.thinkupthemes.com/free/minamaze-free/
• Author: ThinkUpThemes
• Author URI: http://www.ThinkUpThemes.com
• Description: Minamaze the free version of the multi-purpose professional theme (Minamaze Pro) ideal for a business or
blog website. The theme has a responsive layout, HD retina ready and comes with a powerful theme options panel with
can be used to make awesome changes without touching any code. The theme also comes with a full width easy to use
slider. Easily add a logo to your site and create a beautiful homepage using the built-in homepage layout.
• Version: 1.0.6
• License: GNU General Public License
• License URI: /licenses/license.txt
• Tags: black, dark, red, one-column, two-columns, right-sidebar, left-sidebar, fixed-layout, responsive-layout, fluid-layout,
custom-header, custom-menu, full-width-template, theme-options, threaded-comments, editor-style, featured-images,
featured-image-header, post-formats, sticky-post, translation-ready, flexible-header, gray, light, white, custom-background
• */
テーマ Twenty Fourteen 404.php
archive.php
author.php
category.php
comments.php
content-aside.php
content-audio.php
content-featured-
post.php
content-gallery.php
content-image.php
content-link.php
content-none.php
content-page.php
content-quote.php
content-video.php
content.php
featured-content.php
footer.php
functions.php
header.php
image.php
index.php
page.php
rtl.css
screenshot.png
search.php
sidebar-content.php
sidebar-footer.php
sidebar.php
single.php
style.css
tag.php
taxonomy-
post_format.php
PHPWordPressのカスタマイズはPHPの知識があると良い。
PHPの書き方「<?php 」で始まり「?>」で終わる
<?php bloginfo( 'name' ); ?>
!
編集するエディターに注意。
PHPコメントアウトは1行の場合は 「// 」、
複数行の場合は 「/* */」
例:<?php //bloginfo( 'name' ); ?>
間違い→ <!̶ <?php bloginfo( 'name' ); ?> ̶>
※記号はすべて半角
if文<?php if (wp_is_mobile()) :?>
スマホ&タブレットだったらここを表示
<?php else: ?>
スマホ&タブレットじゃなかったらここを表示
<?php endif; ?>
テンプレートの仕組み何のファイルを使って表示されてるかを理解する必要がある。
どこで使われてるか?テンプレートの参照順を理解すると良い。
▼固定ページ
page.php
▼投稿ページ(記事詳細)
single.php
左側から優先で読み込まれる
!
!
http://wpdocs.sourceforge.jp/
テンプレート階層
テンプレート優先順位category-slug.php -- 特定のカテゴリー用テンプレート
category-ID.php -- 特定のカテゴリー用テンプレート
category.php -- カテゴリーの汎用テンプレート
archive.php -- 汎用アーカイブテンプレート(タグ・日別アーカイブなどと共用)
index.php
Twenty Fourteen の場合404.php
archive.php
author.php
category.php
comments.php
content-aside.php
content-audio.php
content-featured-
post.php
content-gallery.php
content-image.php
content-link.php
content-none.php
content-page.php
content-quote.php
content-video.php
content.php
featured-content.php
footer.php
functions.php
header.php
image.php
index.php
page.php
rtl.css
screenshot.png
search.php
sidebar-content.php
sidebar-footer.php
sidebar.php
single.php
style.css
tag.php
taxonomy-
post_format.php
footer.php フッター
front-page.php トップページ
functions.php テーマのための関数
header.php ヘッダー
/img 画像フォルダ
index.php 基準テンプレート
/js javascriptフォルダ
page-wide.php ページテンプレート サイドバー無しバージョン
page.php ページテンプレート
sidebar.php サイドバー
single.php 投稿詳細ページ
style.css スタイルシート
テーマの一例です。
テーマのカスタマイズsingle.phpなどのテンプレートファイルに書かれている場合と、
functions.phpなどに書かれている場合がある。
機能的なものはfunctions.phpに書かれる場合が多い。
カスタムメニュー、jQuery、CSS、カスタムヘッダー、
カスタム背景、ウィジェット等
どのテンプレートを使ってるか?Show Current Template
wordpress.org/plugins/show-current-template/
テンプレートタグ<?php the_content(); ?>
Codexなどを参照すると良い。
読み方<h1 class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" >
<?php bloginfo( 'name' ); ?></a>
</h1>
<body <?php body_class(); ?>> <div id="page" class="hfeed site"> <?php if ( get_header_image() ) : ?> <div id="site-header"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt=""> </a> </div> <?php endif; ?>
ループ<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_title(); ?> ←記事のタイトル
<?php the_content(); ?> ←記事の内容
<?php endwhile; else: ?>
記事がありません
<?php endif; ?>
続きは小林さん、中畑さんのセッションで