WordPressカスタマイズまとめ

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

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

スポンサーリンク

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

TwentyTwelveカスタマイズ

WordPress高速化

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

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

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

ブログの更新はこちらから

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

コメントの反映には時間がかかる場合があります。

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

  1. まい

    しげぞうさま

    有難うございます!
    公開されているものも、テキストでもそうなってしまいます。
    どのサイトを見てもdivタグが挿入されるとは聞かないのでどうしてかなぁと思ってたのですが、
    直すのは難しそうですね。

    ご丁寧に有難うございました。
    これからもブログ拝見させていただきます~

    まい

  2. しげぞう 投稿作成者

    まい様

    コメントありがとうございます。divタグとかpタグという確認はどのように確認してますか?テキストエディタで確認しているのでしょうか?ちなみに私の場合もエンターキーで、pタグが出て来る訳ではなくて、公開してからツールなどでソースコードを確認するとpタグが入っているという状態です。

    設定などでは変えられないと思うので、使っているエディタとかが違うのかな?と思ったりしてます。

  3. まい

    はじめまして。最近ワードプレスでプログを始め、参考にさせてもらっています。
    初心者なのですが、本当にわかりやすくてとても助かっています!

    質問があります。
    調べると、エンターキーでは普通pタグが挿入されるとのことですが、私はdivタグが挿入されてしまい、改行はイチイチ手入力しています・・・。

    この設定を治す方法はあるのでしょうか。

    もし変な質問だったらスルーしてください^^;

  4. アキ

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

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

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

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

  5. しげぞう 投稿作成者

    アキ様

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

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

  6. アキ

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

    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行目を見ましたが間違いが発見できません。
    これはどういう事態になってしまっているのかアドバイスお願いいたします!

  7. えりこ

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

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

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

  8. しげぞう 投稿作成者

    えりこ様

    返信ありがとうございます。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」追加、もしくは再読込みを試してみて下さい。

  9. えりこ

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

  10. しげぞう 投稿作成者

    えりこ様

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

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

  11. えりこ

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

  12. えりこ

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

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

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

  13. しげぞう 投稿作成者

    えりこ様

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

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

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

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

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

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

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

  14. えりこ

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

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

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

  15. しげぞう 投稿作成者

    えりこ様

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

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

  16. えりこ

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

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

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

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

  17. しげぞう 投稿作成者

    Okingatarashi様

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

  18. Okingatarashi

    しげぞう様

    天才っ!すごーーーーい
    (max-width: 599px) {
    の { を消したのに戻ら無くて泣きの2通目コメントを送りましたが
    今、見直したら { 消されて無くて。。。

    今、直して保存したら…

    戻ったぁ~~~!!!??
    スゴイ!ポンコツで…ごめんなさい。
    本当にありがとうございました。

  19. しげぞう 投稿作成者

    Okingatarashi様

    返信ありがとうございます。えっと、スタイルシートの中で指摘されていた部分なんですが、@media screen and (max-width: 599px)という部分が599px以下のブラウザサイズの場合という条件分岐なんです。一般的な7インチタブレットのサイズが600pxなので、それ以下つまりスマホの場合という条件分岐になります。

    それでですね、そのスタイルシートに追加されている条件分岐の部分をちょっとピックアップしてみます。

    /*ナビメニュー分岐*/
    @media screen and (max-width: 599px) {
    
    #site-navigation {
        display: none;
    }
    
    /*ブログの説明*/ 
    .site-description {
       background: #fff !important;
       display: none; !important;
    }
    }

    この最後に2つ「 } 」がありますよね、これがOkingatarashi様のサイトの場合は1つしかありません。つまり、条件分岐が閉じられていないため、コレ以降に書いたコードが全てスマホ用のスタイルという事になってしまってます。なので、条件分岐を終わらす「 } 」を上記のように1つ追加して条件分岐と閉じてみてもらえないでしょうか。

  20. Okingatarashi

    しげぞう様

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

     
    です。まず、スタイルシート見直します。
    SSLの記事で、.h 何とか見たいなファイル触って、再度直した事がいけないのかな?
    リダイレクトループ?とか言うのにひっかかるのか、スマホや見るデバイスで見える状況が違ったりしてるのですが、変更をプレビューで見るとスタイル反映してないんですよね…
    本当に、ごめんなさい。ご迷惑様です…

  21. しげぞう 投稿作成者

    Okingatarashi様

    返信遅くなってすみません!多分原因はスタイルシートの途中に記述ミスがある事だと思われます。例えば途中で「 } 」が1つ抜けていたり、多かったりしただけでもそれ以降のスタイルが反映されない場合があります。なので、本当は1つ1つ反映されるか確かめながら記述をしていくと良いのですが。。

    一度ブログを見てみようと思ってアクセスするのですが何故か今表示されませんので、お手数ですが再度URLを教えて頂けると助かります。どうぞよろしくお願い致します。

  22. Okingatarashi

    しげぞう様

    こんばんは!パニックHELP!です。
    今夜9時前にOPENしました。ありがとうございました。
    ここまではいいのですが、なぜ?どうして?
    今まで必死に書いたスタイルが半分くらい…無効みたい…有効な部分も残っているのですが。
    この間の品番とかの部分…勿論子テーマに書き続けてきました。
    トップに行くボタンも元の色に戻ってしまいました…
    何が考えられますか?
    ぐずぐず言わずにやり直しかしら…入れ直したけど、ダメだった…ポンコツが焦ってるからどこかがおかしいだけでしょうか。
    思いつくことがあったら教えて下さい。宜しくお願いします。
    早々のご迷惑HELP!でごめんなさい。

  23. しげぞう 投稿作成者

    Okingatarashi様

    返信ありがとうございます。それとサイトのオープンおめでとうございます!!サイトのURLや名前の表記も好きなように使ってやって下さい。全く問題ないですし私も非常にありがたいです。ここまで結構長かったですがOkingatarashi様の諦めない精神は凄いです(笑)

    今後も継続しながらまた何かあればいつでもコメント下さい。私もOkingatarashi様のようなサイトはあまり経験がないのでヘルプになるかは分かりませんが、できるだけ応援したいと思っていますので今後ともどうぞよろしくお願い致します。

  24. Okingatarashi

    しげぞう様
    おはようございます。HELP!の私です。
    ちょっと伺いたいのですが、6月25日の夜、オープンのあいさつ?ブログをアップしますが
    このサイトのURLを付けてしげぞうさんの名前書いても(しげぞうさんって、表記)いいですか?
    英語版と日本語版が、あるのですが、ご迷惑になると困るので確認してからと思います。Facebookページのアップもするから、英語版も書いちゃう感じになります。ご迷惑なら断られても気にしませんので気兼ねなく断って下さい。
    もし、構わない様でしたら、URLはカスタマイズがいいのか「アフィリエイトで稼ぐ」の方がいいのか教えて下さい。
    ご一考願えますと助かります。宜しくお願いします。

  25. シン

    しげぞうさん。

    教えてもらったcssを元に試したらなんとか行けました!

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

  26. しげぞう 投稿作成者

    シン様

    コメントありがとうございます。リンクの幅というのはおそらく高さかな?と思います。違ったらすみません。

    一応私の場合は目次リンクの行間というか高さをスタイルシートで以下のようにしてます。Twenty Twelveの場合ですが。

    .entry-content li {
        line-height: 1.75;
    }

    この1.75の部分の数値を大きくするとさらに行間は開きますので、一度これで調整してみて、イメージと違うという場合には再度コメント頂けると助かります。どうぞよろしくお願い致します。

  27. シン

    しげぞうさん。今、wordpressの固定ページで目次ページを作ったのですが、各記事リンクの幅が狭くてちょっと見にくいです。

    僕の理想としては各記事リンクの幅を
    https://affiliate150.com/wordpress-customize

    のようにしたいのですがどうしたら良いのでしょうか?

    よろしくお願いします。

  28. たこやき

    しげぞう様

    ばっちり線が入りました!いつもありがとうございます!

  29. しげぞう 投稿作成者

    たこやき様

    コメントありがとうございます。記事タイトルの下の線ですが、これは使っているテーマによって違ってくる部分があるかと思います。一応私の場合(Twenty Twelve)の場合ですが、スタイルシートに以下のコードを追加してます。

    #content .entry-title {
        border-bottom: 1px dotted #CCC;
    }

    上記の記述では「border-bottom」が下線の部分で、1pxの点線(dotted)で色を(#CCC)という風に指定できます。点線は「dotted」ですが、「solid」に書き換えると実線になります。

  30. たこやき

    しげぞう様

    いつもありがとうございます。またまたひとつ質問です。
    記事タイトルの下に線がありますが、それはどのようにすれば線が入るのでしょうか。

    またお手すきの際にでもよろしくお願い致します。

  31. okinagatarashi

    しげぞう様
    こんにちは。お世話になります。
    遅くなってなど!とんでもないです!!何をおっしゃるやら!見てくれただけで感謝しまッス!!
    予定が変わって今日もWardpressと戦っています。

    いけました!!すごい!!
    出来たよ!!出来た!!前よりいい!!ブログ用もこれに変えます!
    本当にありがとうございました!

  32. しげぞう 投稿作成者

    okinagatarashi様

    返信おそくなってすみません。とりあえずナビの色なんですが、下記2つの記述を追加してカラーを変更するとナビの色を変更できると思います。スタイルシートに追加です。

    /* ナビ背景色 */
    #site-navigation li a {
        background-color: #000;
    }
    
    #site-navigation li.current_page_item a, #site-navigation li.current-menu-parent a {
        background-color: #000;
    }

    それとカーソルが乗った時の色は下記を追加してカラーを変更してみて下さい。

    /* ナビカーソルが乗った時の色 */
    #site-navigation li a:hover {
        background-color: #000;
    }

    上記でカラーの変更ができない場合はお手数ですが再度コメント頂けると助かります。どうぞよろしくお願い致します。

  33. okinagatarashi

    しげぞう様
    お世話になります。ご返信をありがとうございました。
    お忙しい中ありがとうございます。

    月曜中、火曜の午後と別の要件で私も手一杯です。
    ご迷惑が一杯なのでちらっとでも見て貰えるだけで有り難いです。
    宜しくお願いします。

    本当に本当にありがとうございます。

  34. しげぞう 投稿作成者

    okinagatarashi様

    コメントありがとうございます。別テーマですね!ちょっと見てみます。今からちょっと用事なので、返信は週明けになると思いますので、ちょっと待ってもらってもいいですか?すみません。またコメントへの返信しますね。

  35. okinagatarashi

    しげぞう様
    ごめんなさい。こんにちは。
    聞いたらいけない事を聞きます。
    テーマをwelcartに変更したのですが、
    ファイル類が複雑でお手上げです。
    フォーラムはワードプレスのフォーラムよろしく何がなんだか全く・・・

    テーマがwelcartですがHELP!お願い出来たりしますか?

    ナビメニューとか、今まで教わったマシーン語は使えてますが
    マウスが来ると白い文字が鯉グレーに変えてたけど同じコードで背景がグレーになっちゃったりです。
    ここは、Twenty Twelveでの事だから図々しいのは重々承知なので
    気兼ねなく。断って下さい。

    welcartって、このサイトみたいに、私みたいな初心者助けてくれるサイト見つからないです。
    もし、どこかご存知だったら教えて下さい。
    ご迷惑お掛けします。ごめんなさい。

  36. しげぞう 投稿作成者

    たこやき様

    わざわざありがとうございます。数ヶ月前にこのブログだけアドセンスの配信停止されて、しばらく復旧させずにアドセンス以外の広告に変更しておりましたが、ドキドメのサイトを統合した関係でドキドメ関連の記事だけアドセンスを復活させようかと思っています。そのため、配信停止のままの広告を設置して審査待ちをしている状況です。

    アドセンスは復活してもしなくても個人的には特に影響はないのですが、実験も兼ねて審査をしている所です。上手くいけばWordPress関連記事だけはアドセンスが表示されるようになると思います。

  37. たこやき

    いつも本当にお世話になっております。
    ドキドメのアドセンスが表示されていないようなのですが…私の勘違いでしたらすみません。