テーマ・ファイル(親テーマと子テーマ)のカスタマイズ(兎組の授業)

むかごさんの個別 wordpress
のメニューバーは、これまでとは違った色がついてますね。
どのように、なさったのでしょう?
多分、テーマファイルのCSSファイル style.css をいじられた(改変)のだと思います。

 このようなテーマファイルをいじってのカスタマイズは、いわば究極のカスタマイズで、もっともっと後になると思ってました。
 が、先進的なむかごさんで、始められたので、テーマファイルをいじる時に心得ていた方がよいと思われることを書いてみます。
 テーマファイルこそが、wordpress の根幹をなすもので、その理解は、全体構成の理解につながります。
テーマは、テーマディレクトリーの中、style.css と、多くの php ファイル、画像ファイル、その他で、構成されています。
 インストールされたばかりのwordpress には、twentyten,twentyeleven,twentytwelveの3つのテーマが存在します。 そのうちのtwentyelevenの中をのぞいてみましょう。
 twentyeleven が、テーマに設定されているとして、のぞくには、管理画面>テーマ編集をクリック。

 メニューバーの色を変えるには、この style.css のどこかを、いじれば、変わると思います。
 でも、このファイルを直接いじちゃうと、失敗して元に戻らなくなった時は、困ったことになります。
 また、wordpress のバージョンアップの時、テーマファイルもバージョンアップがあったりすると、せっかく設定した(色を変えた)ものが、バージョンアップで、上書きされると云うリスクもあります。

 そこで、テーマを直接にカスタマイズするのではなく、そのテーマの機能を受け継いだ子テーマを作り、その子テーマをカスタマイズする方法があります。

子テーマを作るには、以下の2つの作業が、最低限必要です。
(1)wordpress のインストールされたディレクトリー >
「wp-content」ディレクトリー > 「theme」ディレクトリー
中に、子テーマ用のディレクトリーを作る。
(2)作った子テーマ用のディレクトリーの中に、style.cssファイルを作り、親テーマとの関係の情報を記述します。

 兎のテーマは、TwentyElevenを親テーマとして、派生させたテーマとなっています。
 具体的な作り方については、別途、記事にしたいと思ってますが、とりあえず、兎」ブログにログインして(管理者権限)、外観 > テーマ編集で、子テーマのstyle.cssを見ることができます。
 見ておいてください。

 親テーマを直接、いじるカスタマイズもいいですが、そのテーマから、派生した(派生させた)子テーマをいじった方が、いろいろと都合がいいことも理解してください。

テーマ・ファイル(親テーマと子テーマ)のカスタマイズ(兎組の授業)” への7件のコメント

  1. 水田さん、先走ってごめんなさい。
    子テーマは確かに安心感はあって、
    blockquote{
    content .entry-title {
    などピンポイントで作れるものは、いいと思いました。

    でもナビとかになると複雑で、どこを手直ししていいやらです。

    水兄ぃの子テーマにしても 
    #menu-global li.current-menu-item > a, .selected {
    #breadcrumb{
    も、検索かけても出てこないし、phpにdivを作ったのかしら??
    と謎だらけです。

    テーマ編集のスタイルシートの原型をきちんと保存しておけば、
    いつでももとに戻るのではないでしょうか。
    原型のほかに8月1日の分とかで保存しています。

    • breadcrumb は名称から推測して「ぱんくずリスト」。
      なので、header.php を探してみてください。

      • パンくずリスト=自分で作ろうと思って、はじめましたが、未完。
        続けるか、削除するかは、未定。=しばらくは、このままでしょう。

  2. >テーマ編集のスタイルシートの原型をきちんと保存しておけば、
    >いつでももとに戻るのではないでしょうか。
    むかごさんは、整理整頓がいいからね。
    僕なんか、原文を何回かいじっていると、どれが本物かすらわからなくなる。
    なんせ、twentytwelve のstyle.cssは、2千数百行もあるのだから、取り扱うのだけで、大変。

    #menu-global は、メインメニューを作る過程で、名前を、global としたので、
    <div id="menu-global"> なんてタグが作られたのです。
    ソースをみて、メニュー近辺がどんなタグになっているかをみる必要があるかもですね。 (firebug を使うと便利)

  3. のぶさん、ブレッドね、想像力の欠如、英語力の欠如・・・・あ~あ

    水兄ぃ、ソースがありましたね。見てませんでした。一番簡単そうな「リンク集」を見ましたが、ごちゃごちゃ。でも、divの名前がわかるし、納得できるところもあるし。よさそうです。

    水田さんの作られた子テーマにこの二つを入れてもいいでしょうか。
    blockquote{
    投稿の際に、目立ってアクセントになるし
    content .entry-title {
    今のタイトルはわかりにくいので、こちらも区切りに良いし。

    • 意味がよくわかりませんが。
      何でもあり」やってみてください。
      ただし、まずかったら、元に戻せるように、用意の上ね。

  4. よく分からないけど、
    なぁ~ るほど、 そういう事ですか!
    水兄ぃが作って下さっている理科のHPでダッシュボードに
    外観がなく・・
    Child of Twentyten for rika ってあるのは何?
    と、 なぞでした。
    外観はやたらいじられないように隠してあるのですね?

コメントを残す

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