---
title: "事業サイトをWordPress公式リポジトリに掲載されているテーマを使ってリニューアルしてみました"
canonical_url: "https://olein-design.com/blog/oleindesign-website-renewal-by-wordpress-org-theme"
language: "ja"
date_published: "2017-10-08T15:39:26+09:00"
date_modified: "2017-10-08T15:39:26+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
  category:
    - "WordPress"
  post_tag:
    - "WordPress"
    - "ブログ"
    - "ホームページ"
    - "ホームページ制作"
---

# 事業サイトをWordPress公式リポジトリに掲載されているテーマを使ってリニューアルしてみました

最近、お仕事でもWordPressに関わることがめっきり多くなってきました。そして、その中でもほとんどのお仕事は**オリジナルテーマの制作**となってきます。 実際にデザインを制作することもありますし、完成したデザインをいただいて実装だけ行う場合もあります。 そして、そうやって業務をこなしていく上で感じていたことは「オリジナルテーマだけがWordPressじゃないよな」ということ。いや、当然なんですよ。仕事だからオリジナルテーマを作ることが多いだけで、実際のユーザーさんの統計を取ってみると、既存テーマを使ったブログやウェブサイトの方が多いはずです。 であれば僕も実験的に[公式リポジトリに掲載されているテーマ](https://ja.wordpress.org/themes/)を使って事業用ウェブサイトを作ってみようかな、と思いつきました。  ## 採用したのはAutomatticのEdinというテーマ

 では、どんなテーマを親テーマにした開発をしようかなぁと探してみたところ、一番自分のイメージに近いテーマがこちらでした。 https://ja.wordpress.org/themes/edin/ あまり漠然と探しても見つからないだろうと思い、まずはAutomatticさんが作られているテーマから探してみたら、イメージに近いものが見つかりました。 こちらを親テーマとして使わせてもらうことにしました。 ## まずはCSSで見た目を整える作業から

 まずは、ローカル開発環境で実際にEdinをインストールし、それに伴って子テーマを作成します。 そして、`functions.php`から親テーマの`style.css`を読み込んで、子テーマの`style.css`も読み込む処理を書きます。 ```
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}
```

 こんな感じです。親テーマのCSSを読むときには`get_stylesheet_uri()`を使うところで詰まないようにしましょう。 読み込み処理が完了したら、あとはひたすらCSSを書いていくだけです。 僕の場合は実際には、Flywheelでローカル環境を作り、PreprosでSassのコンパイル環境とLive Previewの設定をしておきます。（FTPの設定もPreprosでやっちゃう） すると、あとは好きなようにSassを書いていけば勝手にコンパイルしてブラウザは更新され修正が反映されるという感じです。ごくごく普通です。こんな感じで開発を進めます。 ## 親テーマを上手に使う

 親テーマを利用した子テーマ開発のメリットとしては、 - 親テーマのアップデートを頼れる→メンテナンスコスト下げれるかも
- 親テーマの持っている機能を継承できる→実装工数減らせるかも

 というところは大きいポイントだと個人的には考えています。 ちゃんとした親テーマを選んでおけば、定期的なアップデートを見込めるので、多くの部分のメンテナンスを依存することができます。（あえて「依存」と書きます） また、カスタマイザで使える機能なども継承することができるので、改めて実装する必要もなくなり、制作工数を少なくすることができます。それでも自分で組み込みたいという感じでやっちゃうと最終的に「なんで子テーマ開発してんだろ（親で作った方がはやくね？）」みたいなことになりかねないので注意が必要です。 ですので、今回も**やりすぎない**ということは意識しました。**「子テーマ開発はこんな感じになりますよ」**のサンプルとしても使いたかったので。 ## どうしても実現したかった機能は追加

 ### フッター部分に事業名追加

 フッターのクレジット部分に、事業名と子テーマ開発で作っているというクレジットを追加しました。 ### SVGロゴを追加

 カスタムロゴ機能が付いていなかったので、`header.php`を編集して、ロゴSVGを挿入しました。 ### Google FontsとFontAwesomeを追加

 Google Fontsを利用したかったので読み込み、そして一緒にFontAwesomeも読み込むようにしてあります。 ### 検索結果一覧でサムネイル表示

 サイト内検索を行なった結果一覧に記事サムネイルが表示されないデフォルト記述だったので、サムネイルがある時だけ表示させるように変更しました。 ## こんな感じになっています

 まだまだこれから日々改良ですが、こんな感じになっています。色々と見て回ってみてください。 **「まずは始めてみる」**という個人さんや事業者さんには、十分なんではないかと思います。ある程度、構造部分をしっかりと考えてからテーマを選んでいけば、それほど間違えることもないと思います。 ただし、たまに有料アドオンがないとデモサイトのようなカスタマイズができないという場合もあるので、そこだけ注意してテーマを選びましょう。 費用的にはこれくらいからスタートすることができますよ！という[サンプル費用はこちら](https://olein-design.com/for-customer/sample-price)に掲載してあります。  [サンプル費用はこちら](https://olein-design.com/for-customer/sample-price)  まだまだ完成ではないですが、日々気になったところを少しずつ改良していきたいと思います。