Download to read offline
Uploaded bykenji goto
WordPress ブラウザで始めるカスタマイズ＋ テーマの基礎的な知識
2014.10.24 コワーキングスペース茅場町Co-Edo 第15回ゼロから始めるWordPress勉強会〜「テーマをカスタマイズしてみる！」＆懇親会〜
WordPress ブラウザで始めるカスタマイズ＋ テーマの基礎的な知識
- 2. 自己紹介 Evangelist 04 よつばデザイン 後藤賢司 東京と大分の2拠点で活動中。 出版社～デザイン会社～Web制作会社～企画会社～独立。 根っこから考えるタイプのお仕事が得意。 ブランド立ち上げ、メディアサイトの企画・運営など。 企業Webサイトの企画・デザイン。
- 3. 活動 WP-D グリーン CPIエバンジェリスト ゼロから始めるWordPress勉強会 (facebookグループ） Webクリエイターのための情報交換所 (facebookグループ） Webクリエイターズニュース すみだクリエイターズクラブ
- 4. COCOmag 子どもと一緒の毎日を 楽しく、可愛くする情報 （メディアサイト） http://COCOmag.net
- 5.
- 6.
- 7. Webクリエイターズニュース Web制作者に 役立つ情報を発信。 http://web-cre.info/
- 8.
- 9. 少しずつ覚えていく 全部理解出来なくても良い。 おさえておけば良いポイントを 覚えておくとこの先幸せ。
- 10.
- 11. テーマカスタマイズへのステップ 1．テーマとCSSを理解する 2．PHPの基礎を理解する 3．テンプレート構造を理解する 4．テンプレートタグを理解する
- 12.
- 13.
- 14.
- 15.
- 16. テンプレートタグ WordPress独自のテンプレートタグには CSSを出力するものもある。 ! 例：<?php post_class(); ?>
- 17. テンプレートタグとCSS <article id="post-<?phpthe_ID(); ?>" <?php post_class(); ?>> ↓ <article id="post-18" class="post-18 post type-post status-publish format-standard hentry category-uncategorized”> idやカテゴリーなどいろんなCSSが適用される。
- 18.
- 19. Jetpack 多機能なプラグイン。 CSS編集が出来るようになる。 https://wordpress.org/ plugins/jetpack/
- 20. カスタムCSS カスタムCSSの機能を使う。 利用テーマに影響しないので アップデートなどで 消える事がない。
- 21. ブラウザの開発ツールを使う 変化を確認しながら、 作業が出来る。 ※リロードすると消えます。 変更したCSSをコピー。
- 22.
- 23.
- 24. テンプレートのカスタマイズ wp-content/themes/（自分の使ってるテーマ名） 確認する方法 wp-content/themes/（自分の使ってるテーマ名）/style.cssに記述
- 25. style.css Theme Name:テーマのタイトル Theme URI: テーマのアドレス Description: テーマの説明 Version: テーマのバージョン Author: テーマ作成者 Author URI: テーマ作成者のアドレス Tags: テーマのタグ
- 26. • /* •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 • */
- 27. テーマ 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
- 28.
- 29. PHPの書き方 「<?php 」で始まり「？＞」で終わる <?php bloginfo( 'name' ); ?> ! 編集するエディターに注意。
- 30. PHP コメントアウトは1行の場合は 「//」、 複数行の場合は 「/* */」 例：<?php //bloginfo( 'name' ); ?> 間違い→ <!̶ <?php bloginfo( 'name' ); ?> ̶> ※記号はすべて半角
- 31. if文 <?php if(wp_is_mobile()) :?> スマホ＆タブレットだったらここを表示 <?php else: ?> スマホ＆タブレットじゃなかったらここを表示 <?php endif; ?>
- 32.
- 33. どこで使われてるか？ テンプレートの参照順を理解すると良い。 ▼固定ページ page.php ▼投稿ページ（記事詳細） single.php
- 34. 左側から優先で読み込まれる ! ! http://wpdocs.sourceforge.jp/ テンプレート階層
- 36. テンプレート優先順位 category-slug.php --特定のカテゴリー用テンプレート category-ID.php -- 特定のカテゴリー用テンプレート category.php -- カテゴリーの汎用テンプレート archive.php -- 汎用アーカイブテンプレート（タグ・日別アーカイブなどと共用） index.php
- 37. 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
- 38. 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 スタイルシート テーマの一例です。
- 39. テーマのカスタマイズ single.phpなどのテンプレートファイルに書かれている場合と、 functions.phpなどに書かれている場合がある。 機能的なものはfunctions.phpに書かれる場合が多い。 カスタムメニュー、jQuery、CSS、カスタムヘッダー、 カスタム背景、ウィジェット等
- 40. どのテンプレートを使ってるか？ Show CurrentTemplate wordpress.org/plugins/show-current-template/
- 41. テンプレートタグ <?php the_content();?> Codexなどを参照すると良い。
- 42. 読み方 <h1 class="site-title"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" > <?php bloginfo( 'name' ); ?></a> </h1>
- 43. <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; ?>
- 44. ループ <?php if( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php the_title(); ?> ←記事のタイトル <?php the_content(); ?> ←記事の内容 <?php endwhile; else: ?> 記事がありません <?php endif; ?>
- 45.