WordPressカスタマイズまとめ

WordPressブログ

2020.07.01 2018.02.05

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

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

⇒初心者でも迷わないWordPressの始め方や使い方まとめ！

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

TwentyTwelveカスタマイズ

以上WordPressのカスタマイズまとめでした。

まいより:
2017年1月24日 1:25 PM
しげぞうさま
有難うございます！
公開されているものも、テキストでもそうなってしまいます。
どのサイトを見てもdivタグが挿入されるとは聞かないのでどうしてかなぁと思ってたのですが、
直すのは難しそうですね。
ご丁寧に有難うございました。
これからもブログ拝見させていただきます～
まい
しげぞうより:
2017年1月23日 2:52 PM
まい様
コメントありがとうございます。divタグとかｐタグという確認はどのように確認してますか？テキストエディタで確認しているのでしょうか？ちなみに私の場合もエンターキーで、pタグが出て来る訳ではなくて、公開してからツールなどでソースコードを確認するとpタグが入っているという状態です。
設定などでは変えられないと思うので、使っているエディタとかが違うのかな？と思ったりしてます。
まいより:
2017年1月20日 3:17 PM
はじめまして。最近ワードプレスでプログを始め、参考にさせてもらっています。
初心者なのですが、本当にわかりやすくてとても助かっています！
質問があります。
調べると、エンターキーでは普通ｐタグが挿入されるとのことですが、私はdivタグが挿入されてしまい、改行はイチイチ手入力しています・・・。
この設定を治す方法はあるのでしょうか。
もし変な質問だったらスルーしてください^^;
アキより:
2016年12月21日 12:35 AM
返信ありがとうございます！
返信いただいた問題は無事問題も解決できました！
ですがいろいろとやっていくうちに問題がたくさん出てきてしまいました。
ちゃんとサイト通りに作っているつもりですが全く出来ていない所が多々…
でも絶対に作りたいという気持ちがあるので諦めないで頑張ってみます！
これからもご指導ご鞭撻よろしくお願いします
しげぞうより:
2016年12月18日 9:58 PM
アキ様
コメントありがとうございます。子テーマのcomments.phpの一部が間違っているので、それを修正すればOKです。具体的には親テーマのcomments.phpをコピーしてそのまま子テーマにコピペ。つまり、親テーマと小テーマのcomments.phpの内容を同じにして保存します。これでエラーは消えると思います。
すでにcomments.phpをカスタマイズしているのであればもう一度その部分だけやり直しになりますが、とりあえずエラーを解消するのが先かと思います。
アキより:
2016年12月18日 3:43 PM
しげぞうさん質問です！！
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の６０行目を見ましたが間違いが発見できません。
これはどういう事態になってしまっているのかアドバイスお願いいたします！
えりこより:
2016年12月15日 10:38 PM
ご返信遅くなり申し訳ありません！
いつも通りすがりのこんな私に対して親切に教えて頂きありがとうございます。
この問題は「Twenty　Twelve」を使っていた時からありました。
もしかしたらプラグインの影響かもしれません。
今少しずつ勉強しているので、ちょっと追及してみます。
もし分かれば、ご報告させて頂きます。
これからもこちらのブログで勉強させて頂きますので、
どうぞよろしくお願い致します。
しげぞうより:
2016年12月4日 3:21 AM
えりこ様
返信ありがとうございます。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」追加、もしくは再読込みを試してみて下さい。
えりこより:
2016年12月3日 8:45 PM
私逆に、スマホで見てました。
ブラウザで確認したら反映されていました。
しかしスマホでは反映されないのは、
スマホ版とブラウザ版は別なのでしょうか？？
スマホ版の編集はまた別のやり方があるんでしょうか・・・？？
しげぞうより:
2016年12月1日 9:53 AM
えりこ様
返信ありがとうございます。私のブラウザでチェックしてみたら反映されているみたいです。なので、えりこ様の方のブラウザでブログを表示させ、一度「Ctrl」と「F5」を一緒に押してリロードしてみて下さい。
もしくはスマホとか別のデバイスで確認してみて下さい。
えりこより:
2016年11月30日 11:32 PM
・・・・・すいません、頂いたソースを貼りつけましたがそれでも反映されません（泣）
もうお手上げです・・・
えりこより:
2016年11月30日 11:27 PM
お忙しい中ご教授して下さり、ありがとうございます！！
なるほど、そういうカラクリだったわけですね・・・！！
何度やり直しても、ブラウザ履歴を削除しても意味がなかったわけです。
目から鱗でした。
HTMLやCSSに関しては、体系的な知識を身に着けたくて
現在は書籍を使って勉強中です。
新しいことがわかるようになると楽しいですね。
デベロッパーツールの使用を検討してみます。
しげぞうさんには本当に感謝、感謝です。菓子折りを送りたいくらいです。
何かセミナーやサーバーを契約する必要が出た際は、読者としてこのサイトのリンクから登録します！！
ありがとうございました（＾＾）
しげぞうより:
2016年11月30日 10:28 AM
えりこ様
返信ありがとうございます。なるほど、テーマによって要素というか、それぞれ見出しにつけてある名前が違います。
例えばテーマを自作する場合には見出しやタイトル、その他あらゆる場所に自分の好きな名前をつける事ができます（HTMLマークアップ）。それで名前をつけた場所にCSSでスタイルを当てていきます。
えりこ様の使われているテーマの「h2」には「advisor-the-post h2」というクラス名がついていますので、これにスタイルを当てます。
```
.advisor-the-post h2 {
    color: #333;
    font-size: 24px;
}
```
という感じになります。ということは今後自分の使っているテーマにそれぞれ付けられている名前を探す必要がでてくる訳です（共通の名前の部分もありますが）。私のブログはTwenty Twelveを元にカスタマイズしてますので、それぞれ付けられている名前（クラス名）などが違う部分が多いと思います。
これらを調べる方法として「デベロッパーツール」を使うと簡単です。主要なブラウザには標準で装備されている機能ですが、使い方を覚えるまでが少し時間がかかるかも？です。これ使えるようになるとHTMLやCSSの役割や使い方が一気に理解できると思います。
デベロッパーツールの使い方などは検索すれば山ほど情報がでてきますので一度調べてみてみて下さい。そしてまたわからない部分が出てきたらまたコメント下さいませ！
えりこより:
2016年11月30日 12:55 AM
こんばんは。ご返信ありがとうございます！
何度も確認して更新してるのですが、どうしても見出し(h2)が反映されないのです。
大変恐縮なのですが、もし確認して頂けるならお願いしたいです・・・！
おそらく、テーマの構造の問題なのかなあと思うのですが、
自分では原因を把握しようがありません・・
立ち上げたばかりの稚拙なブログでお恥ずかしいですが。
ご返信はいつでもいいので、お手すきの時にお願いします(>‗<)
しげぞうより:
2016年11月29日 10:01 AM
えりこ様
コメントありがとうございます。考えられるのはCSSの記述ミスとか、テーマの優先順位的なやつかな？と思います。その部分だけでなく全体的にコードのチェック、特に「　｝」とか「　：　」などが間違っていたり抜けたりしてるとその後の記述は反映されない場合がありますので、その辺のチェックを再度してみて下さい。
どうしても原因がわからない場合にはブログのURLを教えてください。一度チェックしたら原因もわかるかもしれません。また、URL自体はコメント公開時には削除しますのでどうぞよろしくお願い致します。
えりこより:
2016年11月29日 12:13 AM
しげぞうさん、助けてください(泣)
子ページのCSSを変更してもまったく反映されません。
本文の見出しや行間が反映されないのです。
※pとかｈとか
色の変更ならできるんですが…
閲覧履歴の削除や、CSSに!importantを書いたり色々試しましたがだめでした。
ちなみに、キャッシュ系のプラグインは使っていないと思います。
使っているテーマはTwenty Twelveではなく
Restaurant Advisorというやつです。
テーマの構造の問題でしょうか？
しげぞうより:
2016年6月28日 12:55 PM
Okingatarashi様
返信ありがとうございます！こちらも確認しましたが、上手く反映されているようで良かったです！また何かあればいつでもコメント下さいね！

« 前へ 12