MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
簡単に解説!WordPressのオリジナルテーマを作成する5つの手順

簡単に解説!WordPressのオリジナルテーマを作成する5つの手順

公開日:2019年03月29日
最終更新日:2019年03月29日
オンスタ運営
WordPress
ホーム > 全記事一覧 > まとめ > 簡単に解説!WordPressのオリジナルテーマを作成する5つの手順

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37
このエントリーをはてなブックマークに追加
簡単に解説!WordPressのオリジナルテーマを作成する5つの手順
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

サイトを立ち上げるなら、自分好みのデザインを取り入れたいと思う人が多いでしょう。それを実現するために、オリジナルテーマの作成を検討している方もいるのではないでしょうか。今回は、WordPressでオリジナルテーマを作成する手順をご紹介しますので、ぜひチェックしてみてください。

オリジナルテーマ作成の手順はたったの5つ

完成までの手順は5つです。では、早速その5つのステップを見ていきましょう。

 

開発環境を整える

はじめに開発環境を整えます。テーマを作成していく上で必要なツールをインストールして、開発しやすい環境を作ります。サーバー上で開発する人もいますが、基本的にはローカル環境下で作成していきます。

WordPressを動作させるためには、少なくともWebサーバーとMySQLを起動させる必要があります。そこで頻繁に使われるアプリケーションとしてXAMPPを挙げることができます。XAMPPをインストールすれば、ApacheとMySQLが動く環境を1度で構築できるため、Web開発に頻繁に使われます。

また、プログラミングをする必要があるので、エディターを準備しなければなりません。エディターを使用すればスペルミスなどを自動で検知してくれるので、実行時エラーなどを未然に防ぐことができます。また、タブで複数のファイルを管理できるので、作業効率が高まります。よく使用されるエディターにはATOMなどがあります。無料で利用できるので、手軽なものを使用したい人におすすめです。

 

オリジナルテーマに必要なファイルを作成しよう

次に、オリジナルテーマに必須のファイルを作成します。そのファイルとは、index.phpとstyle.cssです。index.phpは、いわゆるトップページにアクセスしたときに表示されます。一方でstyle.cssはスタイルシートとも言われ、装飾を設定するファイルです。例えば、レイアウトの色や小見出しのデザインなどはstyle.cssで定義されます。

簡単に言えば、たった2つのファイルでオリジナルテーマが作成できてしまいます。しかし、簡素なテーマだけです。もちろん、サイトに動くデザインを取り入れたいなら、それを定義するJavaScriptファイルが必要です。また、サイドバーや投稿ページなどを追加するならphpファイルをさらに追加しなければなりません。index.phpとstyle.cssだけで高機能かつデザイン性の高いテーマは作成しづらいので、その点は注意するといいでしょう。

 

必要なファイルをフォルダにまとめよう

作成したら、その2つのファイルをフォルダにまとめます。フォルダ名はテーマ名にするのが一般的です。例えば、有名なものにTwenty Seventeenがありますが、フォルダ名はtwenty-seventeenとなっています。

 

ファイルをサーバーのWordPressフォルダーにアップロードしよう

まとめることができたら、サーバーにアップロードします。アップロードをするときは、FTPソフトを使用するといいでしょう。もちろん、SSH接続などほかのやり方でもかまいません。

アップロード先はテーマを入れるフォルダーにする必要があります。通常は、WordPressフォルダーにあるwp-content/themesの中に入れます。themesフォルダーの中には、すでにインストールされているテーマがありますが、気にせずにアップロードして問題ないです。

 

管理画面から作ったテーマを反映させよう

次は、テーマを反映させます。管理画面にアクセスしてサイドバーの外観をクリックします。すると、その画面の中に作成したテーマの名前が表示されます。そして、有効化にすることでオリジナルテーマをサイトに反映させることができます。

オリジナルテーマは何が良いのか?

もちろん、良い点はたくさんあります。具体的なメリットは3つです。

被らないサイトを作れる

ほかの競合サイトとデザインが被らないという点です。無料で公開されているテーマは多くの人が使用しているので、オリジナリティを出すことが難しくなります。また、レイアウトなどが似ていると読者も見慣れているため、広告の箇所などが気づかれやすくなります。そのため、コンバージョンに繋げづらいというデメリットもあります。

一方、オリジナルテーマは個性を存分に取り入れることができます。また、見たことがないデザインを読者に提供できるので、楽しんでもらえたり、広告と気づかずにクリックして成果に繋げられたりします。

 

テーマ構造が理解できるためカスタマイズもしやすい

そのほかにもカスタマイズがしやすくなります。自分で作成できるようになると、同時にテーマの構造も理解できます。例えば、サイドバーを定義したファイルはどこなのかすぐにわかります。カスタマイズがしやすいので、もし何か気に入らないデザインが見つかったときも自分で編集して改善をすることができます。また、新しいデザインを追加する際も容易に行うことができます。自由自在に操れるので、サイトの見た目に対する悩みは少なくなるでしょう。

 

WordPressへの理解が深まる

WordPress自体を勉強する機会にもなります。例えば、PHPを学ぶことでプラグインも作成できるようになります。そのため、次はオリジナルの機能をサイトに追加することも可能になるでしょう。

逆にオリジナルテーマは何がダメなのか?

しかし、良くない点もあります。そのため、これから作成しようと思っている方は好ましくない点も確認するといいでしょう。

 

プログラミング言語を学ぶ必要がある

1つ目はプログラミングの必要性です。テーマ作成をするためには、HTMLやCSSといったWebの基本言語はもちろんのこと、PHPやJavaScriptなど本格的な言語も習得する必要があります。PHPは日本人が開発した言語であり、Web上にも情報がいくつか掲載されていますが、真似るのでは使いこなすとなると深く学習することが求められます。そのため、HTMLやCSSを書ける人でも難しく感じるケースは多いです。また、初心者の中には挫折してしまう方もいます。

 

プロが作るよりもクオリティが下がる

そのほかにもクオリティの低下が挙げられます。本格的なサイトを運用する場合、高いクオリティのデザインや使いやすさが求められます。もちろん、少し勉強しただけでは高品質なサイトを構築することは難しいです。また、制作をお仕事としているプロよりもクオリティが下がる場合が多く、プログラマーといった経歴がある方でなければ制作できないこともあります。

難しいと感じる人は制作会社に依頼しよう

もし、オリジナルテーマ制作が難しいと感じるなら、制作会社に依頼することを検討しましょう具体的な費用相場はこちらのページでご紹介しています。制作会社に依頼すれば、もちろんプログラミングなどを習得する必要がありません。また、プロのエンジニアが開発するため、品質が高いものを手に入れられます。さらに、時間を割く必要もありませんので、成果を得るための作業に時間をかけたれたりします。かかる費用も比較的安いので、制作会社に依頼するほうが効率的でしょう。

まとめ

簡単なオリジナルテーマであれば、多くの人が作成できます。しかし、実際に本格的なサイトで使おうと思うとクオリティが足りなかったり、作成までに時間がかかったりします。そのため、今まで開発の経験がない人は制作会社に依頼することをおすすめします。


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
WordPressで会員サイトを作ろう!会員サイトを作れるプラグインもご紹介
WordPress
公開日: 2019年05月30日
最終更新日: 2019年05月30日
WordPressで会員サイトを作ろう!会員サイトを作れるプラグインもご紹介
  • # WordPress
  • # 会員サイト
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
CSVを使ってWordPressの投稿、カスタム投稿へ記事データを流し込む方法(Really Simple CSV Importer)
WordPress
エンジニア
プログラミング
制作
公開日: 2019年10月31日
最終更新日: 2022年01月17日
CSVを使ってWordPressの投稿、カスタム投稿へ記事データを流し込む方法(Really Simple CSV Importer)
  • # Really Simple CSV Importer
  • # WordPress
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
スピードが改善!WordPressの画像圧縮におすすめしたいプラグイン5選
WordPress
公開日: 2019年06月02日
最終更新日: 2019年06月02日
スピードが改善!WordPressの画像圧縮におすすめしたいプラグイン5選
  • # WordPress
  • # 圧縮
  • # 画像
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
テレワークに最適!社内ポータルサイトにWordPressを使うメリットとは!?
WordPress
公開日: 2020年05月01日
最終更新日: 2020年05月01日
テレワークに最適!社内ポータルサイトにWordPressを使うメリットとは!?
  • # WordPress
  • # 社内ポータルサイト
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【最新版】VPSにWordPressを導入する際に知っておきたいメリット&デメリット
WordPress
公開日: 2018年12月23日
最終更新日: 2018年12月23日
【最新版】VPSにWordPressを導入する際に知っておきたいメリット&デメリット
  • # VPS
  • # WordPress
  • # サーバー
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
初心者必見!WordPressサイトでSEO対策を見直す際にやっておきたい9のこと
WordPress
公開日: 2019年01月17日
最終更新日: 2019年01月17日
初心者必見!WordPressサイトでSEO対策を見直す際にやっておきたい9のこと
  • # SEO
  • # WordPress
  • # 初心者
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【2020年最新】社内WikiをWordPressで作る際に活用したいプラグイン8選
WordPress
公開日: 2020年04月24日
最終更新日: 2020年04月24日
【2020年最新】社内WikiをWordPressで作る際に活用したいプラグイン8選
  • # WordPress
  • # プラグイン
  • # 社内Wiki
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
WordPressのセキュリティを高めるおすすめのプラグイン6選
WordPress
公開日: 2019年04月24日
最終更新日: 2019年04月24日
WordPressのセキュリティを高めるおすすめのプラグイン6選
  • # WordPress
  • # セキュリティ
  • # プラグイン
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
要チェック!WordPressで「できること」or「できないこと」とは!?
WordPress
公開日: 2019年02月28日
最終更新日: 2019年02月28日
要チェック!WordPressで「できること」or「できないこと」とは!?
  • # WordPress
  • # できること
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
WordPressはスマホでも編集可能!?スマホ編集の魅力から課題までを大公開!
WordPress
公開日: 2019年02月14日
最終更新日: 2019年02月14日
WordPressはスマホでも編集可能!?スマホ編集の魅力から課題までを大公開!
  • # WordPress
  • # スマホ
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。