WP 小テーマを作ってカスタマイズしよう

それでは実際に「小テーマ」作っていきましょう。って言っても、超簡単なのでご安心下さい。小テーマが良く分からないって方は、コチラのページを参考にしてみて下さい。⇒小テーマって何!?

また、WordPress Codex 日本語版 小テーマも目を通しておきましょう。最初は良く分からなくても大丈夫なので、必ず読む様にして下さい。

小テーマ作成はたったのコレだけ!!

小テーマフォルダを作成して
 style.css
 functions.php
をコピペするだけ!!

このファイルの中身をチョッとだけイジりますが、たったコレだけであなただけのオリジナル小テーマが作成出来ます!!では、順を追って見ていきましょう♫

①テーマフォルダの中に小テーマフォルダを作成する

あなたのドメイン/wp-content/themes/ココ!!/

デフォルトですと、TwentyTen,TwentyElewven,TwentyTwelveがすでにインストールされていると思います。同じ場所にあなたの小テーマのフォルダを作成して下さい。(名前はあなたのお好みで)

②必要最低限のファイルをコピーする

style.css
functions.php

このサイトでは、TwentyElevenのカスタマイズについてお伝えしていますが、このテーマの中にある2つのファイルを小テーマフォルダにコピーして下さい。

④ファイルの中身を少しだけ編集します

書き換えるのは、あなたの小テーマにあるファイルの方です!!

  1.  style.css のヘッダー部分を書き換えます(ファイルの一番上の部分)
    デフォルトのヘッダー
    /*
    Theme Name: Twenty Eleven
    Theme URI: http://wordpress.org/extend/themes/twentyeleven
    Author: the WordPress team
    Author URI: http://wordpress.org/
    Description: The 2011 theme for WordPress is sophisticated, lightweight, and adaptable. Make it yours with a custom menu, header image, and background -- then go further with available theme options for light or dark color scheme, custom link colors, and three layout choices. Twenty Eleven comes equipped with a Showcase page template that transforms your front page into a showcase to show off your best content, widget support galore (sidebar, three footer areas, and a Showcase page widget area), and a custom "Ephemera" widget to display your Aside, Link, Quote, or Status posts. Included are styles for print and for the admin editor, support for featured images (as custom header images on posts and pages and as large images on featured "sticky" posts), and special styles for six different post formats.
    Version: 1.5
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
    Text Domain: twentyeleven
    */

    ↓コレをこの様に書き換えて下さい。

    /*
    Theme Name: あなたの小テーマの名前
    Description: 小テーマについての簡単な説明
    Author: あなたの名前(管理者名、ハンネ等でもOK)
    Template: twentyeleven (元になっているテーマ名)
    Theme URI: あなたのサイトURLまたは小テーマのディレクトリ名
    Author URI: あなたのサイトURL
    Version: 1.0 (お好きなバージョン)
    */
  2. functions.php の中身を以下の通りにする
    <?php
    add_action( 'after_setup_theme', 'my_child_theme_setup' );
    function my_child_theme_setup() {
        // ここに上書きしたい関数や解除した関数を書く。
    }

ファイルの中身をイジるのは、コノ2つだけです。この2つをやらないと、小テーマを有効化出来ません。「テーマが壊れています」の表示になってしまいます…(汗

⑤テーマを有効化する

ココまで作業が出来たら、ダッシュボードから「外観」⇒「テーマ」にアクセスして下さい。あなたの小テーマが表示されているハズです。後は、有効化すればOK!!これで安心してカスタマイズする事が出来ます。

また、カスタマイズを進めていく内に分かってきますが、必要に応じて必要なファイルをコピーしてくればOKです。あなたがカスタマイズしたいファイルをその都度コピーしてくれば大丈夫です。ここでは、小テーマとして機能させる為の最低限の作成方法を紹介させて頂きました。

 

大変お疲れ様でした!!慣れない事をするとチョッとくだびれますよね(笑 やっていく内にダンダン慣れていきますので大丈夫です。これからが、カスタマイズほんちゃんですからね(笑

参考にしたページ】
 WordPress Codex 日本語版 小テーマ
 Muracchi.com

ランディングページ作成ができるワードプレス用2カラムテンプレート
「LP Designer」レスポンシブWEBデザイン対応

にほんブログ村 ブログブログ ブログノウハウへ

WP 小テーマを作ってカスタマイズしよう” への30件のコメント

  1. ピンバック: TwentyTwelve 投稿記事の表示件数を各ページごとに個別で設定する | 初めてのワードプレス カスタマイズ

  2. ピンバック: TwentyTwelve 記事の全文表示/抜粋表示の表示変更 | 初めてのワードプレス カスタマイズ

  3. ピンバック: TwentyTwelve ヘッダータイトル(サイトタイトル)リンク文字の(色/大きさ)の変更 | 初めてのワードプレス カスタマイズ

  4. ピンバック: TwentyEleven 背景全体に画像や写真を設置する | 初めてのワードプレス カスタマイズ

  5. ピンバック: WP 背景画像を背景全体に表示させる | 初心者でも簡単 オリジナルヘッダー画像を無料で作ろう

  6. ピンバック: Twenty Eleven ページ毎に全文表示/抜粋表示を個別に設定する | 初めてのワードプレス カスタマイズ

  7. ピンバック: TwentyTen 滞在している(開いている)ページのグローバルナビの文字の変更 | 初めてのワードプレス カスタマイズ

  8. ピンバック: TwentyTwelve ヘッダー(タイトル/ヘッダー画像/グローバルメニュー)の配置を変える | 初めてのワードプレス カスタマイズ

  9. ピンバック: TwentyTwelve グローバルビゲーションの文字位置の変更 | 初めてのワードプレス カスタマイズ

  10. ピンバック: TwentyTwelve フッター上の細い線(グレーの線)を消す | 初めてのワードプレス カスタマイズ

  11. ピンバック: TwentyEleven ヘッダー右側の検索BOXを非表示にする | 初めてのワードプレス カスタマイズ

  12. ピンバック: TwentyTwelve サイトコンテンツの幅を変更する | 初めてのワードプレス カスタマイズ

  13. ピンバック: TwentyTwelve 記事コンテンツの左右に余白を入れる | 初めてのワードプレス カスタマイズ

  14. ピンバック: TwentyEleven グローバルナビゲーション 滞在ページの表示変更 | 初めてのワードプレス カスタマイズ

  15. ピンバック: TwentyTwelve 記事タイトルに影をつけて立体的に見せる | 初めてのワードプレス カスタマイズ

  16. ピンバック: TwentyEleven 記事タイトルに影をつけて立体的に見せる | 初めてのワードプレス カスタマイズ

  17. ピンバック: TwentyTwelve 抜粋記事表示時の’続きを読む’の設定 | 初めてのワードプレス カスタマイズ

  18. ピンバック: TwentyEleven フッターエリアの背景色の変更 | 初めてのワードプレス カスタマイズ

  19. ピンバック: TwentyEleven ’コメントを残す’の文字を小さくする | 初めてのワードプレス カスタマイズ

  20. ピンバック: TwentyTwelve サイトタイトルを飛び出す絵本風にアレンジ | 初めてのワードプレス カスタマイズ

  21. ピンバック: TwentyEleven サイト全体の横幅のサイズの変更 | 初めてのワードプレス カスタマイズ

  22. ピンバック: TwentyTwelve フッターエリアの文字色の変更 | 初めてのワードプレス カスタマイズ

  23. ピンバック: TwentyEleven サイトナビゲーションを非表示にする | 初めてのワードプレス カスタマイズ

  24. ピンバック: TwentyEleven サイトナビゲーションを非表示にする | 初めてのワードプレス カスタマイズ

  25. ピンバック: WP 小テーマを知らなくて失敗した時の話 | 初めてのワードプレス カスタマイズ

  26. ピンバック: TwentyTen サイト幅の調整 | 初めてのワードプレス カスタマイズ

  27. ピンバック: TwentyElevenフッターの文字(リンク色)の変更方法 | 初めてのワードプレス カスタマイズ

  28. ピンバック: TwentyEleven サイトナビゲーションを非表示にする | 初めてのワードプレス カスタマイズ

  29. ピンバック: 小テーマ作成は本当に簡単ですよ!! | 初めてのワードプレス カスタマイズ

  30. ピンバック: WP バージョンが既に3.8を越えていますね…(汗 | 初めてのワードプレス カスタマイズ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です