WordPress初心者がカスタマイズする時に注意したいポイント

このブログではアフィリエイトに関連する記事をメインで書いているのですが、WordPressに関する内容も結構書いてたりします。

そんなこともあってか、最近はメールでWordPress関連の質問をいただいたりとか、たまにですけどコメントなんかもしていただけるようになりました。

ありがたい話です。

一応、Wordpressは4、5年ほど触っているので、独学ながらもそれなりに
phpやhtml、css、sqlなどといったものからSEOに関しての知識は持っているつもりです。

ですので、サイトアフィリエイト用のサイトを構築していく上で欲しいなという
機能(検索とか絞込みなど)は基本、自分で作っています。

もちろん、Googleとかで調べながらですけど…

「どうやれば一番効率的でムダがないか」
といったことを意識しながら作成しています。

たまに、知り合いからWordpressの簡単なカスタマイズをお願いされることも
あるのですが、時間が限られていたりするケースがあったりするんです。

そういった時は、どのような状況や環境においてもサイトがきちんと表示されたり
設置した機能がうまく動作したりするのはもちろんのこと、修正もしやすいように
汎用性があるものを作るということを意識しています。

そんなこんなでWordpressでキッチリとしたサイトを作る時は、自分で
やっちゃうことがほとんどなんですが、ただ、ここのところ、ちょっとバタバタ
していたこともあってWordPressのカスタマイズを外注したんです。

デザイン的なものはある程度固まっていたのでデザインカンプ(完成見本みたいなもの)を
作って外注先に依頼したんです。

そして、相手先のテスト環境サーバーへあげられたサイトを確認しながら
機能面やレイアウト等の修正をお願いしたりして、ようやくサイトが完成したんです。

今回は、既にサイトとして運営しているものをカスタマイズしたので
レイアウト等の多少の修正はこちらでしようと思い確認したのですが…

「なにこれ?」
「こんなん修正するくらいやったら自分で作りなおした方が早い…」

汎用性を全く無視した作りに愕然としました。

曲がりなりにも、お金をもらってやっている以上、それなりのクオリティーをもって
作業しなければいけないにも関わらず、そのレベルにまで全く達していない。

たかだか自分ごときの一介のアフィリエイターに言われるくらいなので
おそらくどれくらいのものなのかというのは多少想像できると思います。

もちろんこのことは相手にも伝えました。

ただ、これ以上望んでも意図したようには改善されないと踏んで
自分で大規模修繕を行なうことにしました。

で、隙間を縫って修繕中というわけです。

実際にどんな内容のものになっていたのかというのを、一部紹介していくわけ
ですけど、あくまでもこれはWordPress初心者の方がカスタマイズをする際に
気をつけて欲しいなという意味合いを持っています。

ですので、少しでもそういった方の役に立てばいいなと思っております。

まずはこの画像を見てください。
01

これは外注先が作成したテンプレートの一部をキャプチャーしたものです。
赤枠を付けて番号を振っていますが、これ以外にも突っ込みどころ満載です。

ただ全部突っ込んでたら、日が暮れるのでWordpressのカスタマイズで
特に気をつけたいところを5つだけピックアップしました。

それじゃあ1つずついきましょうか。

まず
これは絶対にやっちゃダメというわけではないのですが、floatを解除するために
空の要素(div)にclear:both;を指定して解除しているもので、以前はこのような
方法が使われていたのですが今は変わっています。

わたしは汎用性を高めるために、このような方法を用いています。

このようにCSSに書き込んでおけばfloatさせた要素の親要素にclearfix
指定するだけでfloatが解除されます

こんな感じで付け足すだけです。
ちなみに、このclearfixの部分の名称は何でもいいです。

次のですが、一部のdiv要素にスタイルを書き込んでいるというのなら
まだ理解できるのですが、すべての要素に直書きしてるんです。

画像を見ていただくと分かると思いますが…

これはねえ、コードが読みにくい&修正がしにくいといったことだけでなく
SEO的にもアウトです。

上記で「愕然とした」部分はここだったんです。

こんなことされたら、どれだけ頑張って記事を書いても上位表示の妨げに
なる要因になってしまいます。

どんなに質のいい記事を書いたとしても、この点でGoogleさんに「アウト~!」
って言われたら意味無いですからね…

②のケースで考えると、どのようにするのがベターかというと

これを

として

スタイルをcssに書き込みます

これだけの話なんですけどねぇ…

で、についてですが、これは論外の話です。

div要素同士のスペースを空けるために空のdiv要素に高さを指定して
強引に見た目を整えています。

サイトを見た人はわからないでしょうが、SEO的にもよろしくありません
じゃあ、どう解決するのかというと、上記で指定したスタイルを見てください。

このようにしているのですが、この10pxのところでスペースを空ける指示を出しています。

要するに、この空のdiv要素は全くいらないものということになります。
④についても同様の考え方です。

最後のです。
WordPressを触ったことがあるなら絶対にしないことをしちゃってます。

まず、今回はテスト環境で作成したものを本番環境にあげるという点からすると
WordPressの管理画面のメディアから画像をアップするなんてことは考えられません。

⑤を見てもらうと分かると思うのですが、画像URLにwp-content/upload/…
なっていますよね。

これは完全に管理画面等からメディアファイルへアップロードしているという
証拠なんです。

しかも、本番環境になればドメインも変わるので、ドメイン部分も修正しなければ
いけないとなると全くもってムダでナンセンスな話になります。

これを解決するには、テーマ(テンプレート)フォルダ内にimagesやimgといった
画像を格納するフォルダを作って、そこに画像を放り込んでやります。

そうすれば

としてやれば環境が変わって、ドメインが変わったとしてもテーマ(テンプレート)
フォルダ内の画像ファイルを読みにいってくれるというわけです。

こうしていれば修正なんかすることないんです…

どうですか。
たった数行のコードの一部に突っ込みをいれるだけで、こんなに長くなりました。

わたしが愕然とした理由が少し分かっていただけましたか?

WordPress初心者の方には、少し難しいという部分があったかもしれませんが
基本的に

①HTMLとCSSは必ず分けること

②Wordpressの関数をできるだけ利用すること

①に関してはマストです。
②は分かる範囲で大丈夫ですので、ちょっと意識してもらえたらと思います。

さあ、今日も長い夜になりそうだ…

WordPress

Posted by yusuke