WordPressカスタマイズまとめ

WordPressのカスタマイズのまとめ記事。WordPressにはたくさんのテーマ(テンプレート)がありますが、テーマの選び方からカスタマイズまでの紹介をしていきます。公式のテーマTwenty Twelveをサンプルとしてカスタマイズしていきます。

また、WordPressの始め方や設定など(カスタマイズ以外)は別記事でまとめてます。
WordPressの始め方や設定、カスタマイズまでのまとめ

スポンサーリンク

WordPressのカスタマイズの前にやっておく事

TwentyTwelveカスタマイズ

WordPress高速化

集客やアクセスアップに必要な知識

affinger
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

WordPressカスタマイズまとめ”に34件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. アキ

    返信ありがとうございます!

    返信いただいた問題は無事問題も解決できました!

    ですがいろいろとやっていくうちに問題がたくさん出てきてしまいました。
    ちゃんとサイト通りに作っているつもりですが全く出来ていない所が多々…
    でも絶対に作りたいという気持ちがあるので諦めないで頑張ってみます!

    これからもご指導ご鞭撻よろしくお願いします

  2. しげぞう 投稿作成者

    アキ様

    コメントありがとうございます。子テーマのcomments.phpの一部が間違っているので、それを修正すればOKです。具体的には親テーマのcomments.phpをコピーしてそのまま子テーマにコピペ。つまり、親テーマと小テーマのcomments.phpの内容を同じにして保存します。これでエラーは消えると思います。

    すでにcomments.phpをカスタマイズしているのであればもう一度その部分だけやり直しになりますが、とりあえずエラーを解消するのが先かと思います。

  3. アキ

    しげぞうさん質問です!!

    TwentyTwelveカスタマイズという項目の『子テーマにfunctions.phpを追加する時の注意点』まで終わった時に気付いたのですがブログを表示させた際の一番下に『Parse error: syntax error, unexpected ”fields” (T_CONSTANT_ENCAPSED_STRING), expecting ‘)’ in /home/xxx1011/xxx1010.com/public_html/wp-content/themes/child/comments.php on line 60』というエラメッセージを発見しました。
    これを元に子テーマのcomments.phpの60行目を見ましたが間違いが発見できません。
    これはどういう事態になってしまっているのかアドバイスお願いいたします!

  4. えりこ

    ご返信遅くなり申し訳ありません!
    いつも通りすがりのこんな私に対して親切に教えて頂きありがとうございます。

    この問題は「Twenty Twelve」を使っていた時からありました。
    もしかしたらプラグインの影響かもしれません。
    今少しずつ勉強しているので、ちょっと追及してみます。
    もし分かれば、ご報告させて頂きます。

    これからもこちらのブログで勉強させて頂きますので、
    どうぞよろしくお願い致します。

  5. しげぞう 投稿作成者

    えりこ様

    返信ありがとうございます。PCでは反映されていて、スマホだけ反映されないという事で、おそらくスマホブラウザのキャッシュかな?と思ったのですが、チェックしてみたら違うみたいです。

    PCページとスマホの切り替えでクラス名が変わる仕様?みたいな感じ?多分、PCページとスマホ版でスタイルを別にする事もできるような意図があるテーマかもしれません。

    スマホページの「h2」のclass名はおそらく「heading-font」。なので、CSSに追加してみて試してみて下さい。下記はサンプルです。

    .heading-font {
      color: #333;
      border-bottom: #94c8b1 dotted 5px;
      border-left: #d0e35b solid 40px;
      padding: 5px 10px;
    }

    上記で反映されない場合には「!important」追加、もしくは再読込みを試してみて下さい。

  6. えりこ

    私逆に、スマホで見てました。
    ブラウザで確認したら反映されていました。
    しかしスマホでは反映されないのは、
    スマホ版とブラウザ版は別なのでしょうか??
    スマホ版の編集はまた別のやり方があるんでしょうか・・・??

  7. しげぞう 投稿作成者

    えりこ様

    返信ありがとうございます。私のブラウザでチェックしてみたら反映されているみたいです。なので、えりこ様の方のブラウザでブログを表示させ、一度「Ctrl」と「F5」を一緒に押してリロードしてみて下さい。

    もしくはスマホとか別のデバイスで確認してみて下さい。

  8. えりこ

    ・・・・・すいません、頂いたソースを貼りつけましたがそれでも反映されません(泣)
    もうお手上げです・・・

  9. えりこ

    お忙しい中ご教授して下さり、ありがとうございます!!
    なるほど、そういうカラクリだったわけですね・・・!!
    何度やり直しても、ブラウザ履歴を削除しても意味がなかったわけです。
    目から鱗でした。
    HTMLやCSSに関しては、体系的な知識を身に着けたくて
    現在は書籍を使って勉強中です。
    新しいことがわかるようになると楽しいですね。

    デベロッパーツールの使用を検討してみます。
    しげぞうさんには本当に感謝、感謝です。菓子折りを送りたいくらいです。
    何かセミナーやサーバーを契約する必要が出た際は、読者としてこのサイトのリンクから登録します!!

    ありがとうございました(^^)

  10. しげぞう 投稿作成者

    えりこ様

    返信ありがとうございます。なるほど、テーマによって要素というか、それぞれ見出しにつけてある名前が違います。

    例えばテーマを自作する場合には見出しやタイトル、その他あらゆる場所に自分の好きな名前をつける事ができます(HTMLマークアップ)。それで名前をつけた場所にCSSでスタイルを当てていきます。

    えりこ様の使われているテーマの「h2」には「advisor-the-post h2」というクラス名がついていますので、これにスタイルを当てます。

    .advisor-the-post h2 {
        color: #333;
        font-size: 24px;
    }

    という感じになります。ということは今後自分の使っているテーマにそれぞれ付けられている名前を探す必要がでてくる訳です(共通の名前の部分もありますが)。私のブログはTwenty Twelveを元にカスタマイズしてますので、それぞれ付けられている名前(クラス名)などが違う部分が多いと思います。

    これらを調べる方法として「デベロッパーツール」を使うと簡単です。主要なブラウザには標準で装備されている機能ですが、使い方を覚えるまでが少し時間がかかるかも?です。これ使えるようになるとHTMLやCSSの役割や使い方が一気に理解できると思います。

    デベロッパーツールの使い方などは検索すれば山ほど情報がでてきますので一度調べてみてみて下さい。そしてまたわからない部分が出てきたらまたコメント下さいませ!

  11. えりこ

    こんばんは。ご返信ありがとうございます!
    何度も確認して更新してるのですが、どうしても見出し(h2)が反映されないのです。

    大変恐縮なのですが、もし確認して頂けるならお願いしたいです・・・!
    おそらく、テーマの構造の問題なのかなあと思うのですが、
    自分では原因を把握しようがありません・・

    立ち上げたばかりの稚拙なブログでお恥ずかしいですが。
    ご返信はいつでもいいので、お手すきの時にお願いします(>‗<)

  12. しげぞう 投稿作成者

    えりこ様

    コメントありがとうございます。考えられるのはCSSの記述ミスとか、テーマの優先順位的なやつかな?と思います。その部分だけでなく全体的にコードのチェック、特に「 }」とか「 : 」などが間違っていたり抜けたりしてるとその後の記述は反映されない場合がありますので、その辺のチェックを再度してみて下さい。

    どうしても原因がわからない場合にはブログのURLを教えてください。一度チェックしたら原因もわかるかもしれません。また、URL自体はコメント公開時には削除しますのでどうぞよろしくお願い致します。

  13. えりこ

    しげぞうさん、助けてください(泣)

    子ページのCSSを変更してもまったく反映されません。
    本文の見出しや行間が反映されないのです。
    ※pとかhとか
    色の変更ならできるんですが…

    閲覧履歴の削除や、CSSに!importantを書いたり色々試しましたがだめでした。
    ちなみに、キャッシュ系のプラグインは使っていないと思います。

    使っているテーマはTwenty Twelveではなく
    Restaurant Advisorというやつです。
    テーマの構造の問題でしょうか?

  14. しげぞう 投稿作成者

    Okingatarashi様

    返信ありがとうございます!こちらも確認しましたが、上手く反映されているようで良かったです!また何かあればいつでもコメント下さいね!