【初心者向け】WordPressをカスタマイズ!基本構造や具体的な操作方法を知ろう

2021.05.12
安藤 大海
目次

はじめに

みなさん、こんにちは。
最近WordPressの新しいブロックエディタをを研究しているWakka.Inc ウェブディレクターの安藤です。

みなさんは会社のサイトを、WordPressで構築されているところも多いのではないでしょうか。

WordPress にはサイトの骨組みとなるテーマと機能を追加できるプラグインがあります。これらはWordPress管理画面からインストールすることで簡単にセンスの良いサイトデザインが可能です。しかし、当然ですが、ほかのサイト運営者も同じようにインストールすることができるため、特に同じテーマを使用しているとお互いにサイトのデザインが似てしまう欠点があります。

ほかのWebサイトと差別化を図るために、WordPressをカスタマイズしてみてはいかがでしょうか。今回はWordPressの基本構造と具体的なカスタマイズ方法を解説しますので、オリジナリティ溢れるWebサイトを構築したいという方はぜひ参考にしてください。

カスタマイズの前にWordPressの基本構造を知る

WordPressとは、オープンソースソフトウェアのCMS(コンテンツマネジメントシステム)です。CMSを利用すれば、HTMLやCSSなど難しい知識がなくてもWebページを作ることができます。そのため、インターネット上で公開されているホームページやブログの多くはWordPressを使っているのです。

WordPressの基本構造を知るためには、フォルダ階層の理解が必須になります。代表的なフォルダは下記の通りです。

・wp-admin

・wp-content

・wp-includes

・テーマフォルダ

それぞれのフォルダに何が含まれるのか詳しく解説します。

wp-adminはどのようなフォルダか

wp-adminは管理画面に関するフォルダやファイルを格納しているディレクトリです。管理画面にログインするとダッシュボードが表示されます。また、左側にある黒いサイドメニューの中には“投稿”、“メディア”、“コメント”などのメニューを確認することができるでしょう。ログインしてはじめに表示されるこのようなページが管理画面です。

wp-adminには、管理画面で使われているHTMLやCSSが格納されており、変更すればカスタマイズすることができます。しかし、直接変更するのは適切な方法ではありません。一般的には、functions.phpに追記して、ダッシュボードのウィジェットを非表示にしたり、不要なサイドメニューを消したりします。つまり、直接編集することは少ないディレクトリです。

wp-contentはどのようなフォルダか

wp-contentはテーマやプラグインフォルダを格納するディレクトリです。テーマのデザインやプラグインの機能に変更を加える際は、まずwp-contentにアクセスすることになります。

wp-includesに含まれているもの

wp-includesには、さまざまな関数やAPIが定義されているディレクトリです。最新バージョンにアップデートすると置き換わってしまうため、直接編集を加えることは少ないでしょう。

テーマフォルダをチェックしてみよう

wp-contentの中にあるthemesフォルダがテーマフォルダです。themesフォルダを開けると実際に使用しているテーマのフォルダーが見つかります。カスタマイズをする際、もっとも直接編集する機会が多い部分です。

実際にWordPressをカスタマイズする具体例を解説

次に、WordPressをカスタマイズする具体例についてご紹介します。では、早速チェックしていきましょう。

CSSをカスタマイズしてみよう

まず、CSSをカスタマイズしてみましょう。CSSは、フォントサイズやレイアウトの大きさ、背景色などを変更することができるファイルです。簡単に言えば、CSSに変更を加えることでデザインを大きく変えることができます。具体的な手順は下記の通りです。

1.管理画面のサイドメニューから外観→テーマエディタをクリックします。

2.テーマファイルからStylesheetをクリックします。

3.選択したファイルの内容に直接変更を加えることでCSSをカスタマイズすることができます。

4.編集後に、「ファイルを更新」のボタンをクリックすると内容が反映されます。

補足

外観のテーマエディタからCSSを直接編集することができますが、追加するだけなら「外観→カスタマイズ」のCSS追加から行うことをおすすめします。テーマエディタは直接ファイルを編集できるため便利ですが、間違えてしまうとサイト全体に与える影響が大きいです。そのため、編集をする際は慎重に行ってください。

検索フォーム

検索フォームは、サイト内を検索することができる機能です。一般的に、検索フォームのデザインを自分好みにカスタマイズする際に編集します。手順は下記の通りです。

1.テーマエディタのテーマファイルからsearch.phpを選択します。

2.ファイルの内容に変更を加えます。その後にファイルを更新してください。

投稿記事

投稿記事は、ブログのページのことです。ブログページのカスタマイズはsingle.phpに変更を加えます。手順は下記の通りです。

1.テーマエディタのテーマファイルからsingle.phpを選択します。

2.内容を変更してファイルを更新します。

404ページ

404ページは、表示するページが見つからなかったときに呼び出されるphpファイルです。404ページの変更は、404.phpから行います。手順は下記の通りです。

1.同じようにテーマファイルの中から404.phpをクリックします。

2.適切な内容に変更を加えましょう。完成したらファイルを更新してください。

WordPressのカスタマイズには専門知識が必須

WordPressは日本で非常に人気のCMSです。そのため、参考文献等も多く、カスタマイズもしやすくなっています。しかし、奥が深いソフトウェアになるため、カスタマイズには専門知識が必須です。実際に、どのような知識が必要なのか詳しく解説します。

HTMLとCSS

1つ目はHTMLとCSSです。WebページはHTMLファイルで構成されています。すべてのページにタグなどが使われているため、Web構築には必須の知識です。

また、CSSの知識も求められるでしょう。公開されているすべてのテーマでCSSを使われており、デザインの変更を加えるときは必ず編集するファイルです。また、レスポンシブデザインの設定もCSSで記述しますので、マルチデバイスで見やすいWebサイトを作るためには必要な知識になるでしょう。

PHP

WordPressはPHPで構築されています。PHPは、The PHP Groupによって開発されたプログラミング言語です。サーバーサイドを構築する際に使用し、動的なWebページを作ることができます。

テーマやプラグインはすべてPHPで実装されています。そのため、PHPの知識が少ないとカスタマイズすることは難しいでしょう。

JavaScript

動的デザインを構築する際、JavaScriptは必須です。例えば、サイトのトップページで複数枚の画像をスライドさせたり、クリック率を上げるために動くボタンを作ったりすることもあるでしょう。このような動的デザインはJavaScriptで構築されているのです。

絶対に必要な知識ではありませんが、ページのクオリティを高めたい場合、使う機会が多いプログラミング言語になるでしょう。そのため、覚えておくと非常に便利です。

カスタマイズが難しければ、プロに頼もう

PHPやJavaScriptは初心者が簡単に使える言語ではありません。そのため、カスタマイズをすることに高いハードルを感じる方も少なくないでしょう。

もし、難しいと感じるなら、Wakka Inc.のオフショア開発がおすすめです。株式会社Wakka  Incは、販売会社向けの業務システム開発やECサイトの構築サービスを手掛ける企業になります。Wakka Inc.のオフショア開発を利用すれば、下記のようなメリットを得ることができるでしょう。

・Webの知識が不要で、貴社が求めるオリジナルのサイト構築が可能!

・業務システムを一式で任せられるなど、大規模プロジェクトにも対応!

・システム運用支援や保守にも対応し、業務のアウトソーシングをサポート!

興味がある方は、下記のページからぜひお問い合わせください。

この記事を書いた人
安藤 大海

学生時代にWebサイトを自作したことがきっかけでWebの世界に。制作会社でデザイン、WordPressテーマ開発の実務を経て、テクニカル・ディレクターとして大規模サイト構築のディレクションを経験。2021年からWakka Inc.の日本拠点でWebディレクターとして参画。最近はブロックエディタになったWordPressをもう一度、勉強しています。

  • ホーム
  • ブログ
  • 【初心者向け】WordPressをカスタマイズ!基本構造や具体的な操作方法を知ろう
Contacts

Wakkaについて詳しく知りたい方はこちら