Webサイト制作コースのお申し込みはこちら Webサイト制作コースのお申し込みはこちら

世界中のWebサイトのうち、およそ40%が「WordPress」で作成されているのはご存知でしょうか。WordPressを利用することでオシャレで高機能なサイトを手軽に作成することが出来ます。

本記事では、WordPressの基本構造からカスタマイズ方法、テーマの選び方についてご紹介していきます。

この記事の結論
  • WordPressはWebサイト作成用のOSS
  • プログラミング知識がなくてもカスタマイズ可能
  • WordPressはテンプレートが豊富で初心者にも使いやすい
  • 使い始めはWordPressの公式テンプレートを活用しよう
  • WordPressを自由に扱いたいならプログラミング学習がおすすめ

WordPressの基本構造

WordPressは、とても簡単にWebサイトを作成できるオープンソースソフトウェアです。

通常Webサイトを作るためには、高度な開発言語やWebデザインを習得したり、難解なフレームワークやインフラを理解する必要があります。しかしWordPressを使うと、プログラミングができなくてもページの編集やカスタマイズができてしまいます！

WordPress用に数多くのスタイリッシュなテンプレートが配布されているので、デザインの知識がなくてもプロ並みのWebサイトが出来上がります。

テンプレートを使ったとしても、さらに変更を加えたくなることがあるでしょう。そんな時は、「機能」ならばこのファイル、「デザイン」ならばこのファイル、といった具合に変更を加える箇所と内容が明確なので、最低限の知識があれば迷うことなくカスタマイズできます。

WordPressの基本
  • WordPressはHTML,CSS,PHPで構成されている
  • プログラミングができなくてもカスタマイズは可能
  • プログラミングができると、より高度なカスタマイズが可能に

WordPressのカスタマイズに必要なプログラミングスキルが学べるスクールならこちら

WordPressは自分好みにカスタマイズが可能

つづいてWordPressをカスタマイズについて詳しく紹介します。

WordPressはテンプレート・テーマなどを活用して自分の好きなデザイン・構造のホームページをつくることができます。好きにカスタマイズができるため自由度が高いのです。

カスタマイズに使用できるテンプレート・テーマは無料で使用できるものもあれば、有料でダウンロードするものもあります。また組み込めばそのまま使用できるタイプもあれば、もともとがシンプルなデザインとなっており、組み込んでからカスタマイズする必要があるタイプもあります。

そして実際にWordPressをカスタマイズする前に、つくりたいサイトの「目的」を明確にしておくことをおすすめします。また目的が明確であればサイト内の写真の位置など、構成を簡単に絵で描いておくとカスタマイズの作業がスピーディに進みます。

またサイト設計やデザインが思いつかない時は他のサイトを参照するのがおすすめです。自分がつくりたいサイトと同じ目的を持ったサイトや、おしゃれだと思うデザインのサイトを見て追加したい機能、アクションなどを決めてみてはいかがでしょうか。

そして自分でテーマをつくったり、機能を追加したりするカスタマイズをおこないたい場合、レンタールサーバーではなくローカルの開発環境が必要にあります。ローカル環境とはインターネットに繋がっていなくても存在する環境のことです。

WordPressのカスタマイズにはHTML、CSSの知識は必ずしも必要ではありません。しかし、より自由に、スムーズにカスタマイズするためにも事前に学習しておくことをおすすめします。

WordPressのカスタマイズに必要なプログラミングスキルが学べるスクールならこちら

WordPressのカスタマイズ方法5つ

実際にはどのような方法でカスタマイズできるんでしょうか？

WordPressをカスタマイズする方法は主に5つあります。その5つをこれから順番に見ていきましょう。

テンプレートを使う

WordPressのデザインや仕様を変えるのに最も簡単な方法がテンプレートを利用することです。無料・有料を問わず今は様々なテンプレートがあり、自分の好きなようにサイトをつくることができます。

新しくテンプレートをインストールするには、WordPress内のダッシュボードを利用するか、WordPressの公式配布サイトを利用します。

ダッシュボードからインストールする場合、画面左上の「ダッシュボード」を選択したあとに「外観」を選び、「テーマ」を選択します。そして画面上に書かれている「新規追加」を選びます。するとキーワードを入力する欄や特徴などから公式テーマを検索できる項目が出てきます。なのでここから自分の好きなテンプレートを探し、見つけたらインストールします。

またWordPressの公式配布サイトを利用する場合、サイトに飛んだあと画面右上にある検索欄などを利用し、自分の好きなテンプレートを探します。気に入ったテンプレートを見つけたらダウンロードします。そして公式配布サイトでダウンロードしたテンプレートを使用する場合、FTPクライアントを利用する必要があります。FTPクライアントとはインターネットを経由してファイルを送受信する仕組みのうちの一つです。

プラグインを使う

WordPressはプラグインを使用することもできます。プラグインをインストールすることで、もともと最低限の機能のみで設計されているWordPressにお問い合わせフォームやSEOの設定といった追加の機能を足すことができます。

WordPressの管理画面から新しくプラグインをインストールする場合、はじめに「プラグイン」を選択し、新規追加の画面に移動します。そして出てきたページで紹介されているプラグインをインストールする方法があります。

またWordPressのこちらのページから自分の欲しい機能のプラグインをインストールすることも可能です。

インストールしたプラグインはWordPressの管理画面の「プラグイン」を選択し、新規追加画面に移動します。するとアップロードという項目があるので、そちらからインストールしたプラグインのファイルをアップロードできます。

CSSでデザインを変更する

WordPressでは管理画面、もしくはFTPソフトからCSSを編集することもできます。CSSとはホームページの文字の色や大きさ、背景の色や写真の配置などを指定することができる言語です。

WordPressの管理画面からCSSの編集画面に行くには、はじめに「外観」を選択します。そして次に「テーマの編集」を選択します。そしてそこからスタイルシート(style.css）を選択します。

そしてFTPソフトをダウンロードしている人であれば、サーバーにFTPソフトで入り、そこからWordPressのファイルへと進んでいきます。するとテーマフォルダの中に「style.css」があるのでそちらを開けばエディタでCSSの編集ができます。

HTMLやCSSをはじめとした、「プログラミングの基本を学びたい」といった方は、「ポテパンキャンプ」での無料カウンセリングがおすすめです。

PHPで仕様などを変更する

WordPressはPHPというプログラミング言語でつくられています。そしてPHPの知識があればつくりたいホームページの仕様を変更することが可能です。

たとえばホームページ上部にあるヘッダーを変更させたい場合、「header.php」を編集することで仕様が変更できます。またWordPressのメインのテンプレートファイルは「index.php」にあり、こちらを編集することでホームページの表示を変えることができます。

ただしPHPのファイルを編集するなら事前にPHPの学習をしておくことをおすすめします

投稿した記事の本文を「抜粋表示」する

WordPressではブログなどの各投稿の抜粋を表示する機能があります。投稿した本文を抜粋して表示することで、本文にどのような内容が書かれているのか読者が把握できるようになります。

抜粋表示をする場合、はじめにダッシュボードから「投稿」に進み、「投稿の編集」を開きます。そして抜粋したい文章を抜粋の部分に入力しておきます。

そのあとに抜粋した文章がサイトに表示されるよう、phpのファイルを編集します。抜粋を出力するPHPの関数はthe_excerpt()関数になります。

WordPressを編集する方法5つ
  • テンプレートを使用する
  • プラグインを使う
  • CSSでデザインを変更する
  • PHPで使用などを変更する
  • 投稿した記事の本文を「抜粋表示する」

WordPressのカスタマイズに必要なプログラミングスキルが学べるスクールならこちら

WordPressをカスタマイズする際の実際の流れ

カスタマイズ方法が何となく理解できたところで、次は実際のカスタマイズ作業の流れについて見てみましょう。

ページの設計

まず最初は、サイト構築の目的を満たすために、どのようなページ構成にするかを考えるところから始まります。いわゆるページの設計図です。Webでは「ワイヤーフレーム」と呼ばれています。

ワイヤーフレームができれば、次はテーマの選定です。ワイヤーフレームを実現するために最適なテーマを選びます。

ページの実装

テーマが決まれば、次はそのテーマをPHPに変換します。テーマはただのHTMLファイルなので、それをWordPress用にPHPへ変換しなければいけません。

変換できれば、体裁を整えるためにCSSに編集を加えて、より細かく自分の好みに合わせます。

そしてHTMLやCSSだけでは対応できない制御や機能を、PHPにてコーディングしていきます。

ページのテスト

変更を加えつつテストして見栄えを確認、という流れを繰り返し、最終的にサイトとして完成させます。この流れを経て、あなただけのオリジナルサイトが出来上がるのです。

もっと詳細を知りたい方は・・・

もっと手順を詳細に知りたい、実際に手を動かしてみたくなってきたという方は、以下のサイトを参考にするとよいでしょう。

「WordPressのオリジナルテーマ作成フロー・基本マニュアル」

WordPressをはじめとした「プログラミング全体のサイト設計が学びたい」といった方は、「ポテパンキャンプ」での無料カウンセリングがおすすめです。

WordPressのテーマを選ぶポイント3つ

つづいてWordPressのテーマの選ぶポイント3つについて詳しく紹介します。

サイトの目的に合ったテーマかどうかを確認する

WordPressのテーマは大量にあるため、目的を明確にしてから選択することをおすすめします。

ブログを開設したいのならブログを書くのに最適なテーマを選択し、ポートフォリオをつくりたいのならポートフォリオ向けのサイトを選びましょう。

また文章を書くことだけではなく、アフィリエイト広告で収入を得たいと考えている人は、SEO対策がされているテーマを選びましょう。

メディアを作る際には、目的から逆算してデザインや機能を選ぶことが重要になります。目的を確認してからカスタマイズを始めましょう。

WordPress公式サイトに載っていないものは避ける

WordPressのテーマを配布しているサイトは公式サイト以外にも多数あります。そして公式サイトには載っていない、日本語で表記されていない海外テーマなどは避けるのが無難です。

無料でインストールできるテーマの中にはセキュリティ対策が万全でないものもあり、使用するのが危険なものがなかにはあります。WordPressを使いはじめたばかりの人は日本語に対応していて公式サイトで配布されているテーマを選ぶことをおすすめします。

デザインだけではなく仕様も確認する

WordPressを利用しはじめたばかりの初心者の場合、仕様や機能などを確認せずにデザインだけでテーマを決めてしまうことがあります。

仮にデザインだけでテーマを決めてもあとからプラグインをインストールして機能を追加することはできますが、もともと欲しい機能があるのなら、その機能に特化したテーマを選ぶことをおすすめします。

また今はパソコンではなくiPhoneなどスマホでサイトを見る人が多いので、レスポンシブデザインに対応したテーマを選ぶのがおすすめです。ほとんどのテーマはレスポンシブデザインに対応していますが、念のためインストールする前に確認しておきましょう。

WordPressのテーマを選ぶ際のポイント3つ
  • サイトの目的に合ったものかどうか確認する
  • 公式サイトに載っているものかどうかを確認する
  • デザインに加え、仕様も確認する

WordPressのカスタマイズに必要なプログラミングスキルが学べるスクールならこちら

おすすめテーマ5選

つづいてWordPressのおすすめテーマを5つ紹介します。

Yuuta

ブログを書きたい人、写真や動画を紹介したい人におすすめのテーマが「Yuuta」です。文字の色は白と黒のみで、写真や動画を大きく表示できるデザインとなっています。

旅行ブログなどにおすすめのテーマです。

Simplicity

「Simplicity」はブログやアフィリエイトの広告での収入を目的としたサイトにおすすめです。シンプルなデザインのためCSSを利用して自分の好きなデザインに編集しやすいですし、こちらのテーマは利用者が多いためカスタマイズの方法をインターネットで検索しやすいです。

またこちらのテーマはこまめにアップデートがされており、2018年3月現在の最新バージョンはSimplicity2となっています。また配布サイトでは動作不良時のガイドラインも書かれているので、困った時も安心です。

Portfolio

「Portfolio」はタイトルの通り、デザイナーやカメラマンがつくるポートフォリオ向けのテーマです。

Portfolioの場合多数の画像をサイトに表示することができ、また画像の上にマウスを置くと文字を表示することができます。そのため作品名や制作した日付などを記入できます。そしてこちらのテーマはスマホでも見られるレスポンシブデザインに対応しています。

Brew House

「Brew House」はレストランやカフェなど飲食店のホームページをつくるのにおすすめのテーマです。食事や飲み物を表示することができますし、またお店へのお問い合わせ、各SNSへの連携もあります。

また飲食店以外に写真を掲載するブログなどにも利用できるテーマです。

Fukasawa

ECサイトをつくるのにおすすめのテーマが「Fukasawa」です。こちらのテーマは商品となる写真をギャラリー形式で表示することができます。また写真をクリックすると商品の詳細ページに移動させることも可能です。

ページ全体が白を基調としたシンプルなデザインとなっているので、掲載する商品を選びません。
WordPressのカスタマイズに必要なプログラミングスキルが学べるスクールならこちら

WordPressカスタマイズするときに読んでおくべき記事3選

VIVID COLORS BLOG

「VIVID COLORS BLOG」はYukiYamaguchiさんが運営している個人ブログです。そしてこちらのブログに「WordPressではじめてテーマをカスタマイズ。自作するときありがちな10のつまずき」という記事があります。

こちらの記事は初めてWordPressを利用する人向けに書かれており、テーマファイルの探し方やページファイルについてなど、WordPressの基本的な情報について解説されています。

WordPressのカスタマイズをする前にこちらの記事を読んでおくのがおすすめです。

OZPAの表4(おつぱのひょうよん）

「OZPAの表4(おつぱのひょうよん）」はデザイン会社で働きながらブログを書いてるOZPA(おつぱ）さんの個人ブログです。

そしてこちらのブログの「「htmlすら知らなかった私が2週間でWordPressの新テーマを作成するまでにやったこと」と参考にした記事まとめ」という記事ではWordPressをローカル環境に構築してからhtmlでコーディングしたページをphpに置き換えるまでの過程が書かれています。

こちらの記事では一つ一つの作業の時に参照した記事や書籍や紹介されているので、初心者の人はWordPressをつくる工程と参照サイトを知ることができます。

Stocker.jp/diary

「Stocker.jp/diary」はWebデザイナーのなつきさんが運営している個人ブログです。

こちらのブログの「おそらく最もわかりやすいWordPressテーマ制作チュートリアル」ではWordPressのインストール方法からテーマのデザイン方法、またコーディングの方法まで丁寧まで細かく丁寧に解説されています。

またこちらのブログ内にはさらにWordPressのカスタマイズ方法が分かる「WordPressとは」や、「おすすめのブラグイン」といった記事もあります。

WordPressのカスタマイズについてしっかりと学びたい人にこちらのブログはおすすめです。

まとめ

WordPressのカスタマイズは自由度が高く、ポートフォリオサイトやお店のWebサイトなど様々な用途として制作が可能です。

プログラミングが出来ない方でも、テーマを利用することで簡単なカスタマイズが出来るようになるのでぜひオリジナルのWebサイト制作に挑戦してみてください。

WordPressのカスタマイズに必要なプログラミングスキルが学べるスクールならこちら

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか？

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。