WordPressに慣れてきた人で「ちょっとテーマをカスタムしてみたい」と思う方も多いでしょう。
「既存のテーマを編集してオリジナリティを出してみたい」
サイトに思い入れを抱く人こそ、こういった感情を抱くものです。
ネット上には、CSSのコードをコピペするだけで外観をカスタムできるような情報も沢山アップされています。今ではプログラミング知識のない人でも手軽にカスタムできるようになってきました。
しかし、全くの初心者がテーマを編集する際は注意するべきポイントもあります。
そこで、今回はWordPressでテーマを編集する2つの方法と注意点を紹介します。
WordPressテーマを編集する前の注意点
初心者がテーマを編集する際の注意点は以下の2点です。
バックアップを取っておく
CSSをメモ帳などにコピペしておく
バックアップを取っておく
テーマを編集する際は必ずバックアップを取っておきましょう。
プログラミングスキルのない人がコードを編集していれば不具合が起こるものです。ネット上にある情報を参考にCSSをコピペしても、自分のテーマでは動作しないこともあります。
稀にサイトのレイアウトがずれてしまったり、コピペしたコードが他のコードと干渉して不具合に発展します。自分では解決できなくなってしまうこともあるでしょう。
こんな時にバックアップを取っておけば安心して元の状態に戻すことができます。
バックアップが簡単に行えるプラグインはこちらです。
BackWPup
CSSをメモ帳などにコピペしておく
バックアップから復元するのが面倒な方は、元のCSSコードをメモ帳などにコピペしておきましょう。CSSのみを編集する場合は、この方法が簡単です。
元のCSSコードをコピペする
複製したCSSをコードを編集
正常に動作しているのか確認
このような流れを作っておけば、元のコードをコピペするだけで簡単に復元できます。
2つの注意点をお伝えしました。
次にWordPressを実際にカスタムするための2つの方法を見ていきましょう。
WordPressテーマ編集方法1:「テーマの編集」
WordPress管理画面左側にある選択項目から「外観」→「テーマ編集」の順にクリックします。
CSSを編集したい場合は、画面右側に表示されている「スタイルシート」をクリックします。画面上にCSSコードが表示されますので、こちらのコードをメモ帳にコピペしましょう。
CSSの編集が完了したら画面最下部にある「ファイルを更新」をクリックします。
テーマのカスタマイズが反映されているか確認するには、画面左上のサイト名をクリックします。変更が正常に反映されていればカスタマイズ完了です。
もしも、不具合がある場合はCSSコードに戻って原因を探ってみてください。
変更してみたものの、自分のサイトに合わないなど元に戻したいと思ったらメモ帳のCSSコードをWordPressのスタイルシートにコピペして「ファイルを更新」をクリックして復元してください。
WordPressテーマ編集方法2:「追加CSS」
WordPress管理画面左側から「外観」→「カスタマイズ」の順にクリックします。
テーマのカスタマイズ画面が表示されますので、画面左側のメニュー下部にある「追加CSS」をクリックします。
CSSコードの入力欄が表示されるので、こちらにコードを入力します。
入力したコードはダイレクトに反映されます。反映されない、レイアウトがずれるなどの不具合が起きた場合は、コードを削除するだけです。
テーマの編集が完了したら、カスタマイズ画面左上にある「公開」をクリックすればサイトに反映することができます。
CSSのみ編集したいプログラミング初心者は、こちらの方法でテーマを編集する方が安全と言えます。
豆知識:CSSコードにタイトルをつける方法
プログラミングスキルのない人は「どこまでが新しく追加したコードだっけ?」と混乱するでしょう。
そんな時はコードにタイトルをつけるのがおすすめです。
タイトルをつける際は「/*タイトル*/」のように「/**/」でタイトルとなる文字を囲みます。
これにより文字がCSSとして認識されるトラブルを未然に防ぐことができます。
タイトルには英数字も使用可能ですので、ぜひ活用してみてください。
WordPressカスタマイズはテキストエディタを使おう
WordPressのテーマを編集する際に便利なのが「テキストエディタ」です。ここで紹介するテキストエディタとは一般的なメモ帳ではなく、プログラミングに特化したエディタのことを言います。
プログラミング用のテキストエディタはコードを認識して色分けする機能がついています。これによりコードにミスがある場合、迅速に見つけることができるようになります。
Windows、Macの両方で動作する無料でおすすめのテキストエディタは以下のものになります。
● Atom
● Sublime Text
どちらのエディタも沢山のユーザーが使用している人気のエディタなので、好みに応じて選んでみてください。
WordPressサイトを自分好みにカスタムしよう
今回はWordPressのテーマを編集する2つの方法を紹介しました。
テーマを編集する際は、どちらの方法を使う場合でも必ずバックアップを取っておくようにしましょう。
また、WordPressの「テーマの編集」にあるスタイルシートに直接記述するのではなく、テキストエディタを活用するとより安全にカスタムできます。
プログラミングスキルのない人でも、ちょっとしたテーマのカスタマイズは可能です。
テーマにオリジナリティを加えて、より愛着のあるサイトにしてみてはいかがでしょうか?