Wordpressを思い通りにカスタマイズ|実践法と初心者に読んでほしい厳選18記事紹介【2024年最新版】

Wordpressを思い通りにカスタマイズ

WordPressで構築されたホームページやブログは実に多く、世界のWebサイトの約34.9%を占めるほどに拡大しています(注:W3Techs調べ)。

なぜ、ここまでWordpressを使いホームページを作成するのか?それは、構築後のカスタマイズが自力で行いやすいからです。
WordPressなら、共通のパーツを変更するだけでWebサイト全体が修正できるため、作業が軽減され、しかも迅速かつ正確にカスタマイズできるのです。

では、プログラミングの知識がない初心者の方がWordpressをカスタマイズするにはどんな手順で行えば良いのか?自分たちでWeb制作もやってきた経験から

  • Wordpressの基本構造
  • 具体的なWordpressのカスタマイズ方法
  • カスタマイズに必要な知識が学べるサイトを厳選して紹介

以上の3つを分かりやすく解説します。本記事を読めば、HTMLやCSS、PHPなどの知識がない初心者の方でも自分が思い描くWebサイトにカスタマイズできます。

※WordPressのカスタマイズは制作会社に依頼したい!という方はお気軽にご相談下さい。
Web制作のプロに相談・業者の紹介まで依頼できるのはWeb幹事だけです!

【無料】 WordPressに強い制作会社をプロに紹介してもらう

目次
  1. 1. Wordpressの基本構造について
    1. 1-1. WordpressはCMSの一つ
    2. 1-2. Wordpressカスタマイズで理解しておきたい「テーマ」について
    3. 1-3. WordPressのカスタマイズに必要なソースコード
    4. 1-4. テーマを本格的にカスタマイズするなら「CSS」「PHP」の編集が必要
  2. 2. Wordpressのカスタマイズ方法:CSSを使ったデザイン変更
    1. 2-1. 文字フォント変更
    2. 2-2. 文字色の変更
    3. 2-3. 文字のサイズ・太さの変更
    4. 2-4. ホームページの幅を変更する
    5. 2-5. 画像のサイズを調整する
  3. 3. Wordpressのカスタマイズ方法:PHPを使ったレイアウト・機能変更
    1. 3-1. ファビコン表示
    2. 3-2. PHPを使ってファビコンを表示する場合
    3. 3-3. 「前の記事へ」「次の記事へ」設定
    4. 3-4. ブログや記事を「抜粋表示」にする
  4. 4. WordPressのカスタマイズ事例
    1. 4-1. 問い合わせフォームを設置する
    2. 4-2. 掲示板を作る
    3. 4-3. 会員機能を実装する
    4. 4-4. イベントカレンダーを実装する
  5. 5. Wordpressのカスタマイズに役立つ厳選記事〈18選〉
    1. 5-1. Wordpressの基本構造理解に役立つ記事
    2. 5-2. Wordpressカスタマイズに必要なCSS・PHPの理解に役立つ記事
    3. 5-3. Wordpressのローカル環境構築に役立つ記事
  6. 6. 【まとめ】Wordpressカスタマイズのポイント
    1. 6-1. Wordpressのカスタマイズをプロに任せたい方へ

Wordpressの基本構造について

WordPressの基本構造

まずはWordPressの基本構造を理解しましょう。
「それより早くカスタマイズ方法を教えてよ」と思ったかもしれませんが、理由があります。
きちんと目的に合ったWebサイトを作るためです。

  • 一般的なブログにしたい
  • 画像多めのギャラリーを作りたい
  • ニュースサイトのように情報を検索しやすいサイトにしたい

このようにWebサイトと言っても、用途はさまざま。
いざ頑張ってカスタマイズしたものの、「WordPressに最初からある機能の方が使いやすく、クオリティも良かった…」なんて後悔や時間のロスも起こりかねません。
WordPressの基礎部分だけでも理解しておけば、応用もきく上に失敗のリスクも減らせるのです。

WordpressはCMSの一つ

CMS

WordPressは数あるCMS(Contents Management Systemの略)の一つです。
CMSとは、複雑なプログラミングをしなくても、接テキストを入力したり、画像をアップロードしたりするだけで、webサイトが構築できる便利なシステムこと。

スピーディーにコンテンツが作れるため、「統一性のあるWebサイトが作れる」「Webサイトの更新・管理がしやすい」などのメリットがあります。

つまり、WordPressに向いているWebサイトは以下のようなものです

  • Webサイトの更新頻度が高い
  • Webサイトのコンテンツを増やしていく
  • Webサイトを複数人で編集・管理する

一方で、自由度の高いデザイン性を求める場合などは、後ほど説明する「CSS」や「PHP」の専門的な編集が必要となります。

それを聞いて尻込みしてしまった人も大丈夫です。
本記事では、初心者向けの「CSS」や「PHP」の編集方法も分かりやすく解説していますので、安心してください。

Wordpressカスタマイズで理解しておきたい「テーマ」について

WordPress_テーマ

WordPressが優秀な理由は、複雑なコードやプログラミングの知識がない初心者の方でも簡単に、Webサイトをカスタマイズできてしまうから。

WordPress_テーマ_2

Webサイトのデザインのカスタマイズは、上のようにWordPressの管理画面の左にある「外観」を選びます。

テーマ

Webサイトのデザイン、サイト全体の構成など根幹となるもの

カスタマイズ

Webサイトのメニューやロゴやタイトル、文字や背景の色などを編集

ウィジェット

主にWebサイトのサイドバーやフッターを編集する

メニュー

Webサイトのメニューそのものを作る

ヘッダー

Webサイトのメインとなる画像をカスタマイズする

テーマエディター

CSS(デザインやレイアウトに必要な言語)を直接編集するもの

①テーマ

WordPressのテーマ

WordPressには、Webサイトの根幹となる「テーマ」(テンプレート)があります。
「テーマ」は、Webサイトのデザイン、サイト全体の構成に当たるものです。
無料と有料のものがあり、有料の方が機能が充実しています。

WordPressのテーマ_2

「新しいテーマを追加」をクリックすると、その他のテーマを選ぶことができます。
ご自身のWebサイトの世界観に近いものを選ぶといいでしょう。

それぞれのテーマによって、Webサイトのカスタマイズの種類や方法が異なります。
今回は、WordPressの初期から入っている「Twenty Seventeen」を例に見ていきます。

②カスタマイズ

WordPressのカスタマイズ

Webサイトのメニューやロゴやタイトル、文字や背景の色などのカスタマイズが可能です。

WordPressのカスタマイズ_2

Webタイトルを赤にしたり、サイト全体のテイストを少しダークにしたりするなど編集できます。

③ウェジェット

WordPressのウィジェット

WordPressにおける「ウィジェット」とは、主にサイトのサイドバーやフッターを簡単に編集できる機能のこと。
上のように、サイドバーのタイトルを「リサーチ」「最新のトレンド」と打ち込んで保存すると下のようになります。

WordPressのウィジェット_2

④メニュー

WordPressのメニュー

その名のとおり、Webサイトのメニューが作れます。
例えば上の画面のように「会社案内」というメニューを作ると、Webサイトのトップページに追加することができます。

WordPressのメニュー_2

⑤ヘッダー

WordPressのヘッダー

ヘッダーはWebサイトの上部、つまりメインとなる画像をカスタマイズするためのものです。
画像をアップロードすることで、下のようにWebサイトのトップページが切り替わります。

WordPressのヘッダー_2

⑥テーマエディター

WordPressのテーマエディター

テーマエディターは、CSS(デザインやレイアウトに必要な言語)やPHP(レイアウトや機能の変更)を直接編集するもの。
やや複雑ですが、Webサイトを自在にカスタマイズするために必要なものです。

難しすぎて自分には無理だと思った人も大丈夫。
このあとCSSやPHPの編集の方法を解説し、さらにはコードをコピペできるサイトも紹介します。

WordPressのカスタマイズに必要なソースコード

  種類(呼び方) 反映させるもの
HTML マークアップ言語 コンテンツ(文字、画像、動画、リンク)
CSS スタイルシート言語 デザイン
PHP プログラミング言語 動き、処理

WordPressのカスタマイズ方法を理解するために覚えておいてほしいソースコードがHTML、CSS、PHPの3つです。HTMLとはテキスト構成をブラウザに反映させるもので、CSSはデザインに手を加えるもの、PHPが動きや処理に関わるコードです。それぞれの役割の違いを理解しておいてください。

カスタマイズに使うHTMLタグ

タグ名

タグの意味

hタグ

見出し

imgタグ

画像の埋め込み

ul/ol/liタグ

リスト

brタグ

改行

aタグ

アンカーリンク

pタグ

段落

tableタグ

表を設定

titleタグ

ページのタイトル

meta descriptionタグ

ページ内容の要約

altタグ

画像の代替テキスト

WordPressでHTMLを記述するときは、以下のようなコードを使用します。

<p>pは文章の段落</p>

<h1>1番重要な見出しです。</h1>

<ul>
<li>リストです。</li>
<li>リストです。</li>
</ul>

<ul>
<ol>順序のあるリストです。</ol>
<ol>順序のあるリストです。</ol>
</ul>

<a href="https://〇〇〇〇.com.">〇〇〇〇サイトへのリンクです。</a>

<img src= “sample.png(画像のパスを記述)” alt=”サンプル画像(画像の代替テキストを記述)” />

HTMLでホームページを作成する手順(コード例付き)【2024年最新版】 | Web幹事 HTMLでホームページを作成する手順(コード例付き)【2024年最新版】 | Web幹事 HTMLを使って簡単なホームページを作成する手順を詳しく解説します。初めてHTMLに触れる方でも理解できるコード例やサンプル、テンプレートもご用意しました。

テーマを本格的にカスタマイズするなら「CSS」「PHP」の編集が必要

テーマの編集

前章で解説したように、WordPressの「テーマ」はカスタマイズのテンプレートが用意されており、簡単に編集ができます。

ただし、用意されているカスタマイズを使うだけでは、他のWebサイトと差別化ができずオリジナリティがありません。

自分だけの個性や世界観を出すには、「CSS(文字のフォントや色、大きさなどのデザインの変更)」や、「PHP(レイアウトや機能の変更)」の編集を行いましょう。

注意 CSSやPHPを編集するときは、編集前のコードをコピーして保存してください。
間違ってカスタマイズするとWebサイトのページそのものが表示されなくなってしまうリスクがあるからです。
修正不可能になってからでは手遅れです。
面倒くさがらず、毎回コピーするようにしましょう。

また、いちいちコピーペするのが面倒臭い!という方は、テーマの編集用に、「子テーマ」を作るという方法もあります。

これは使っているテーマ(親テーマ)の他に、親テーマの機能とスタイルを継いだ別のテーマを設けること。
子テーマでエラーが起きても親テーマに影響がないため、安心してカスタマイズができます。

子テーマを設ける方法は説明が長くなってしまうため、次章の『Wordpressのカスタマイズに役立つ厳選記事』で紹介しています。

サイトのデザインを指定する「CSSのカスタマイズ」

CSSのカスタマイズ

「CSS(Cascading Style Sheets)」とは、文字のフォントや色、大きさなどのデザインを変更するための言語。
上のような数字やアルファベットで構成され、初心者の方は見ているだけで頭が痛くなりますよね。

詳しいカスタマイズの例は次章の「具体的なWordpressのカスタマイズ方法」で説明しますが、CSSは主に次のような種類があります。

CSSの種類

  • color…色を編集
  • font-family…文字のフォントを編集
  • font-size…文字のサイズを編集
  • font-weight…文字の太さを編集
  • background…文字の背景画像や色を編集

サイトのレイアウト・機能を指定する「PHPのカスタマイズ」

PHPのカスタマイズ

PHP(Hypertext Preprocessor)は簡単に言えば、Webサイトのレイアウトや機能をカスタマイズするテンプレートのこと。
上の図のように①ヘッダー部分のカスタマイズは、header.phpを編集します。
②検索フォームのカスタマイズは下の図のように、search.phpを編集します。

PHPのカスタマイズ_2

その他にもWordPressには以下のようなPHPの種類などがあります。

  • home.php:トップページの編集
  • single.php:投稿記事ページの編集
  • 404.php:404ページの編集

【無料】WordPressのカスタマイズについて相談する

Wordpressのカスタマイズ方法:CSSを使ったデザイン変更

ここからはCSSとPHPを使った具体的なカスタマイズを実践しながら解説していきます。

しつこいですが、CSSやPHPを編集するときは必ず編集前のコードをコピーして保存しましょう。
間違ってカスタマイズしても元に戻せなくなるリスクがあります。くれぐれもご注意を!

また、変更をしてもWebサイトが変わっていない場合は、キャッシュを削除する必要があります。

キャッシュの削除はMac(SafariかChromeかによっても異なる)、Windowsなど使用している環境によって方法が違います。
「キャッシュ 削除 Mac」などご自身の環境で検索してみてください。

CSSを使ったデザイン変更

CSSの編集は、「外観」⇨「テーマエディター(テーマの編集)」⇨「スタイルシート(style.css)」から行います。

代表的な3つのカスタマイズを説明します。

文字フォント変更

文字フォント変更

フォントそのものを変更する時はCSSのスタイルシートの「font-family」を変更します。
最初に設定されている『sans-serif』はゴシック体のことです。

「font-family:変更したいフォント名;」を入力すると、そのフォントに変わります。
ヒラギノ角ゴシックにしたい場合は、「font-family:Hiragino Kaku Gothic StdN;」です。

文字色の変更

文字色の変更

CSSの編集は、上の画像の「ワードプレスカスタマイズ」の文字色を変更したい場合です。

文字色の変更_2

まず、変更したい部分にカーソルを合わせ、右クリックしてください。
safariなら「要素の詳細を表示」、Google chromeなら「検証」が出てきます。

文字色の変更_3

自分の変更したいCSSが「site-title」であることが分かります。

文字色の変更_4

外観⇨テーマエディター⇨スタイルシートに行き、Macなら<command +F>、Windowsは<control+F>で「site-title」を検索します。

文字色の変更はbody:と書かれた「color」の数字を変更します。
「#」も「;」も残しておく必要がありますので、「#fff」などの数字やアルファベットの部分を変更しましょう。

色のカラーコードは「カラーコード」などで検索すると調べられます。
WEB色見本 原色大辞典』などが有名です。

現在の文字色である白(#fff)から黒(#000)に変えると下のようになります。

文字色の変更_5

文字のサイズ・太さの変更

文字のサイズ・太さの変更

CSSで文字のサイズ・太さを変更する場合は次の2つです。

  • font-size…文字のサイズを編集
  • font-weight…文字の太さを編集

「px」も「rem」も大きさの単位で「1rem = 16px」となります。
文字サイズを変更するときは、この両方を変えます。
上の画面だと現在、36px、2.25remとなっているので、文字を倍にしたいときは「72px、4.5rem」と変更すると次のようになります。

文字のサイズ・太さの変更_2

ホームページの幅を変更する

WordPressのカスタマイズ、ホームページの幅を変更する

ホームページの幅を変更するにはCSSに下記のコードを入れます。

div { width: 1000px;}

1000pxの数字を変更することで幅が変わります。

画像のサイズを調整する

WordPressカスタマイズ,画像のサイズ変更

現在のワードプレスはスマートフォンで見たときに不自然にならないように自動的に調整されていますが、お好みのサイズに調整したい場合もあると思います。その場合は追加CSSに下記を書き込みます。

img { max-width: 90%; height:auto; }

コードの意味は画像(img)のmaxの幅(width)を、画面に対して90%で表示するという意味。PCで見えている幅ぼ90%のサイズになります。

【無料】WordPressのカスタマイズについて相談する

Wordpressのカスタマイズ方法:PHPを使ったレイアウト・機能変更

ファビコン表示

ファビコン表示

上のように、タブ上に表示されるWebサイトのロゴ・アイコンを「ファビコン(favicon)」と言います。正方形で表示されます。

ファビコンはタブ以外にも、「ブックマーク」「スマホのホーム画面」などの場所に表示され、自分のWebサイトを認識してもらいやすくなります。
ファビコンは、Photoshopなどで自分のオリジナルを作るのも良し。
自作が難しい方は、28000点以上のファビコンが無料で配布されている「freefavicon.com」からダウンロードするのも良いでしょう。

そしてテーマによってはPHPを編集しなくてもファビコンを設定できる場合があります。

ファビコン表示_2

「Twenty Seventeen」の場合、「外観」⇨「カスタマイズ」⇨「サイト基本情報」に行けば、上のようなページが表示されます。
左下の「サイトアイコン」で「画像を変更」を選べば、簡単にファビコンが表示できます。

そして、WordPressのPHPを編集すれば、自分のWebサイトのファビコンを表示できます。

ファビコン表示_3

PHPを使ってファビコンを表示する場合

PHPを使ったファビコン表示

まずは管理画面の「メディア」⇨「新規追加」をクリックし、表示したいファビコンを登録。
このとき、画像のURLをコピーしておいてください。

PHPを使ったファビコン表示_2

画像のURLは「メディア」の「ライブラリ」から画像を選択すると右下に表示されます。

PHPを使ったファビコン表示_3

続いて、「外観」⇨「テーマエディタ」に行って、右側の「テーマヘッダー(headder.php」をクリックします。

PHPを使ったファビコン表示_4

22行目の<?php wp_head();/>と23行目の</head>の間に次の文字を入力してください。

<link rel="shortcut icon" href="アイコンのURL">

</head>の位置は、Macなら<command +F>、Windowsは<control+F>の検索で </head>と検索すると分かりやすいです。

「アイコンのURL」は、先ほどコピーしてもらった表示したい画像(ファビコン)のURL。入力後にファイルを更新すればOKです。

「前の記事へ」「次の記事へ」設定

「前の記事へ」「次の記事へ」設定

WordPressのブログや記事にはテーマによって、「<< 前の記事」「次の記事 >>」のリンクが表示されいない場合があり、PHPで追加ができます。

「外観」⇨「テーマエディター」に行き、右側の「個別投稿(single.php)」をクリックします。

シンプルなのは、挿入したい場所に(上の画面では45行目と46行目)に下のコードを入れるだけ。

<?php previous_post_link(); ?>
<?php next_post_link(); ?>

「前の記事へ」「次の記事へ」設定_2

最初の記事の「Hello world!」の一番下に2記事目である「ワードプレスのカスタマイズ」に飛べるリンクが現れます。

「前の記事へ」「次の記事へ」設定_3

そして、2記事目である「ワードプレスのカスタマイズ」の左下には、前の記事である「Hello world!」に飛ぶリンクが設置されます。

もちろん、リンクのテキスト変更も可能。例えば、「前の記事へ」「次の記事へ」という文言にしたければ、下のコードを入れるとOKです。

<?php previous_post_link('&amp;laquo; %link', '前の記事へ'); ?>
<?php next_post_link('%link &amp;raquo;', '次の記事へ'); ?>

ブログや記事を「抜粋表示」にする

抜粋表示

記事やコンテンツが増えると、できるだけスッキリした表示にして一覧しやすくしたいところ。
WordPressのテーマによっては、初期設定のままだと記事やブログの全文が表示されてしまう…なんてこともあります。

そこで役立つのが抜粋表示です。

抜粋表示_2

「外観」⇨「テーマエディター」に行き、右側の「テーマのための関数(functions.php)をクリックし、下のコードを追記します。

function my_excerpt_length($length) {
return 22;
}
add_filter('excerpt_mblength', 'my_excerpt_length');
return(抜粋したい数字)にすることで、コンパクトにできます。

抜粋表示_3

もし表示される文字数がおかしい場合、文字数が正常にカウントされていない可能性があります。
その場合は、管理画面の「プラグイン」⇨「新規追加」から無料の『WP Multibyte Patch』をインストールして有効化してください。
文字数が正常にカウントされるようになります。

【無料】WordPressのカスタマイズについて相談する

WordPressのカスタマイズ事例

  • 問い合わせフォームを設置する
  • 掲示板を作る
  • 会員機能を実装する
  • イベントカレンダーを実装する

続けて、WordPressでのカスタマイズ事例を4つ紹介します。

問い合わせフォームを設置する

お問い合わせフォーム

WordPressのホームページに問い合わせフォームを設置するカスタマイズは、プラグインを使います。代表的なプラグインが「Contact Form 7」です。

インストール方法_Contact Form 7

ダッシュボードの左サイドバーから「プラグイン」をクリックし、プラグインの追加から「新規追加」を選択。「contact form 7」を検索・インストールし、プラグインを有効にすることで問い合わせフォームを設置できます。

WordPressにお問い合わせフォームを設置|おすすめプラグインからリード獲得のための改善方法ガイド【2024年最新版】 | Web幹事 WordPressにお問い合わせフォームを設置|おすすめプラグインからリード獲得のための改善方法ガイド【2024年最新版】 | Web幹事 WordPressには優れたUIを持つ様々なお問い合わせフォームプラグインが豊富に揃っています。そこで、本記事では、お問い合わせフォームのおすすめのプラグインからリード獲...

掲示板を作る

WordPressで掲示板を作るカスタマイズは2パターンあります。

  • 標準機能のコメント機能を使う方法
  • プラグインを使う方法

ここでは、標準機能を使った方法を紹介します。まず、固定ページから新規ページを作成し、好きなタイトルを設定します。ディスカッションの「コメントに許可」にチェックが付いていることを確認してください。ページを作成したら「設定」→「ディスカッション」、以下のように設定します。

「コメント欄」を活用する方法2

重要ポイントは赤で示す部分で、それ以外はお好みに合わせて設定して構いません。詳しくは下記の記事をご覧ください。

【画像で解説】WordPressで掲示板・フォーラムを作成する方法、オススメのテーマ・プラグインを徹底解説【2024年最新版】 | Web幹事 【画像で解説】WordPressで掲示板・フォーラムを作成する方法、オススメのテーマ・プラグインを徹底解説【2024年最新版】 | Web幹事 WordPressで掲示板・フォーラムを作成する方法を徹底解説!合わせておすすめのプラグインもまとめました。専門知識は不要。SNSのようにユーザーが書き込みできるサイトを作...

会員機能を実装する

WordPressのホームページに会員機能(制度)を実装するカスタマイズはプラグインを使います。

WP-Members Membership Plugin

画像引用:https://ja.wordpress.org/plugins/wp-members/

日本語にも対応しており、操作も簡単。利用者も多く、情報もインターネット上にたくさんあるため、初めて会員サイトを作る初心者にはおすすめのプラグインです。

会員登録やログインページの作成は、専用のショートコードを記載するだけ。

WP-Members Membership Plugin_1

ログインフォームが自動で表示されます。

WP-Members Membership Plugin_2

ショートコードは以下のページが用意されています。

  • ログインページ
  • 会員登録ページ
  • 会員プロフィールページ
  • 会員情報編集ページ
  • パスワード変更ページ
  • ユーザー名を忘れたときのページ

会員登録をする際の入力項目や必須項目の選択は設定画面からできます。その他の方法などは下記の記事をご覧ください。

WordPressで会員サイトを簡単に作成するおすすめプラグイン【2024年最新版】 | Web幹事 WordPressで会員サイトを簡単に作成するおすすめプラグイン【2024年最新版】 | Web幹事 会員サイトを作る方法は様々ありますが、WordPressとプラグインを活用すれば、初心者でも簡単に作ることが可能です。本記事では、WordPressで会員サイトを簡単に作れるプラ...

イベントカレンダーを実装する

WordPressのホームページにカレンダーを実装するカスタマイズはプラグインを使います。

営業日カレンダーを表示させたいときに便利なのが「Biz Calendar」。プラグインをインストールし、有効化するとカレンダーが選択できるようになります。

Biz Calendar_1

カレンダーは以下のように定休日や臨時休営業日を設定できます。

Biz Calendar_2

設定が完了したら「外観」から「ウィジェット」を選択、サイドバーに「Biz Calendar」をドラッグアンドドロップで追加します。

Biz Calendar_3

こちらの設定が反映されると、以下のようなカレンダーがサイトのサイドバーに表示されます。

Biz Calendar_4

style.cssを入力できるようであれば、カレンダーを好きな色に設定可能です。その他のプラグインは下記の記事をご覧だくさい。

WordPressにイベントカレンダーを実装するプラグイン3選|予約・営業日の管理をする方法も解説【2024年最新版】 | Web幹事 WordPressにイベントカレンダーを実装するプラグイン3選|予約・営業日の管理をする方法も解説【2024年最新版】 | Web幹事 実店舗やECサイトを運営している際にあったら便利なのが「カレンダー機能」。WordPressで制作したサイトは、簡単にカレンダーを実装することができます。そこで本記事では...

【無料】WordPressのカスタマイズについて相談する

Wordpressのカスタマイズに役立つ厳選記事〈18選〉

ここからは、先に挙げたWordPressの基礎構造やCSS、PHPを使ったWordpressカスタマイズ方法のほか、理解を助ける記事を18に厳選して紹介します。

18記事すべて読まなくても大丈夫です。
実際にカスタマイズをしてみて困ったときのお助けマンとして役立ててください。

Wordpressの基本構造理解に役立つ記事

1.WordPress初心者が知っておきたい22のポイント

WordPress初心者が知っておきたい22のポイント

https://saruwakakun.com/html-css/wordpress/beginner

最初に読んで欲しいのは、サルでもわかる解説をモットーにされているサルワカさんの記事。
WordPress初心者の方に「WordPressの基本」や「つまずきやすい点」など22のポイントを解説。
要点だけを簡潔に説明し、深く理解したい人には関連記事も挿入されており、WordPress初心者の方には最初に読んでもらいたい記事です。

2.WordPressカスタマイズの基本的な考え方

WordPressカスタマイズの基本的な考え方

https://www.nishi2002.com/19720.html

WordPressに関する悩みに関して、個別でもサポートをする「西沢直木のIT講座」さんのブログ。
初心者の方に向け、具体的なカスタマイズ方法ではなく、事前に知っておきたい考え方の解説です。

WordPressのテーマからCSS、PHPに至るまで、間違った方向にカスタマイズしないよう網羅されています。
先に読んでおくも良し、実際にカスタマイズして詰まったときに読むのも良しです。

3.WordPress(ワードプレス)カスタマイズの基本!初心者必読のテーマ・テンプレートやウィジェット等のカスタマイズ

WordPress(ワードプレス)カスタマイズの基本!

https://viral-community.com/wordpress/wordpress-customize-4986/

画像のようにWordPressの基礎構造も、分かりやすく図解してくれている記事です。

WordPressのカスタマイズではどんな事が可能なのか? ポイントと実際のカスタマイズ方法まで詳しく紹介されており、初心者の方は編集しながら読みたい記事になっています。

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

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

http://kachibito.net/wordpress/theme-development-flow.html

WordPressのインストール方法からカスタマイズはもちろん、ローカル環境、オリジナルテーマの作成などWordPressに関するあらゆる知識を網羅した記事。

初心者の方は後半になるにつれ難しい内容になっていくので、いま欲しい情報の部分を読むだけでも価値があります。

Wordpressカスタマイズに必要なCSS・PHPの理解に役立つ記事

5.初心者でも3分でわかる!WordPressの子テーマの作り方

初心者でも3分でわかる!WordPressの子テーマの作り方

WordPressのカスタマイズを始める前に知っておきたい「子テーマ」の作り方を分かりやすく解説してくれている記事。

エラーが出てデータが壊れてしまっても安心なよう、ぜひカスタマイズを始める前に読んでもらいたい記事です。

6.0から始めるHTMLとCSSの基本・基礎-webデザイン入門

0から始めるHTMLとCSSの基本・基礎-webデザイン入門

http://endoutakae.com/2012/02/08/webdesign/

HTMLとは何か?CSSとは何か?など、超初心者の方でも安心の入門記事。

WordPressに限定せずwebデザインをする上で必要な基本から、実際にどんなコードを書き込めばいいかのノウハウまで丁寧に解説。
図解も多く読みやすい記事になっています。

7.自分でカスタマイズしよう!WordPressでCSSを編集する方法【初心者向け】

自分でカスタマイズしよう!WordPressでCSSを編集する方法【初心者向け】

https://techacademy.jp/magazine/7750

WordPressにおけるCSSのカスタマイズ方法を、実際の画面のスクショを多めに解説してくれている初心者にうれしい記事。
CSSに特化して噛み砕いて解説してくれているので、初めてCSSを編集するときにオススメです。

8.初心者必見!CSS編集でWordPressを自分好みにカスタマイズする方法

初心者必見!CSS編集でWordPressを自分好みにカスタマイズする方法

https://www.sejuku.net/blog/59146

CSSのカスタマイズ方法だけでなく、カスタマイズする際に注意しておきたい点、実際に困ったらどう対処すればいいかを解説してくれている記事。

青や赤や緑で色分けし、大事なポイントも見やすくなっています。
専門用語の意味もきちんと教えてくれるので、本当に初心者の事を考えてくれている記事です。

9.PHP初心者がWordPressテーマカスタマイズする方法【WordPress歴4年が解説】

PHP初心者がWordPressテーマカスタマイズする方法【WordPress歴4年が解説】

https://uetani33.net/php-wordpress/

「PHPって何?」という初心者にも分かりやすく解説してくれている記事。
WordPressのカスタマイズに出てくる用語も上の画像のように丁寧に説明してくれています。

WordPressのPHPに特化してくれているので、一からPHPを勉強しなくてもいいので安心です。

10.WordPressでWebサービスを作る方法

WordPressでWebサービスを作る方法

https://stocker.jp/diary/wordpress-1/

WordPressにおけるPHPカスタマイズの入門編。PHPとは?という解説から、図解多めにPHPのカスタマイズ方法を紹介しています。
練習問題があるなど、実践に役立つユニークな記事です。

11.WordPressテーマカスタマイズ事始め・基本構造を理解してカスタマイズしてみる

WordPressテーマカスタマイズ事始め・基本構造を理解してカスタマイズしてみる

http://kachibito.net/wordpress/theme-customizing-1st-step.html

WordPressにおけるPHPの役割など、イラストやPHPのコードを載せて、かなり詳しく説明したマニアックな記事。

なぜPHPを編集するとWordPressがカスタマイズできるのか理解が深まります。

12.日本語版WordPressチートシート

日本語版WordPressチートシート

https://www.webcreatorbox.com/tech/japanese-wordpress-cheat-sheet

初心者の方がPHPをカスタマイズしていて、「何じゃこれ?」という暗号のようなPHPも丁寧に解説してくれています。
事前に読むというより、実際にWordPressを編集して詰まったときに参考になります。

13.WordPress 覚えておきたいカスタマイズテクニック22個

WordPress 覚えておきたいカスタマイズテクニック22個

https://www.webtoolnavi.com/wordpress-techniche/

シンプルイズベスト。
「こんなカスタマイズしたいときに、どうPHPを編集するのだろう?」という疑問にストレートに答えてくれる記事です。
22のカスタマイズを紹介し、コピペできるようにPHPのコードを紹介しているシートです。

14.WordPressのテーマを自分で作成してみたら意外と簡単だった

WordPressのテーマを自分で作成してみたら意外と簡単だった

https://wpmake.jp/contents/theme/theme_create/

WordPressのカスタマイズにおいて、自分のオリジナルテーマを作るための記事。
初心者でも挑戦できるよう、本題に入る前には複雑なCSSやPHPの用語の説明もしてくれている丁寧な記事です。

15.10日で覚えるWordPress カスタマイズの記事一覧

10日で覚えるWordPress カスタマイズの記事一覧

http://bashalog.c-brains.jp/category/series/10wordpress/

トップページをカスタマイズしたい、記事をカスタマイズしたいなど、ニーズに応じて10の記事を紹介している。
タイトルから自分に必要な記事が探せ、 記事の中身も詳しく丁寧に解説した10の記事なので、WordPressのカスタマイズに重宝したいです。

Wordpressのローカル環境構築に役立つ記事

16.超簡単!WordPressのローカル環境をあっという間に作る方法と注意点

超簡単!WordPressのローカル環境をあっという間に作る方法と注意点

https://briarpatch.co.jp/wp-local

仮想のサイトを作って様々な検証を行えるローカル環境。
初心者の方でもローカル環境を作れるよう、かなり丁寧に簡潔に解説してくれている記事です。
ポイントが一目で分かり、「やってみよう」という気になれます。

17.初心者必見!ローカル環境でWordPressを動かす方法(MAMP)

初心者必見!ローカル環境でWordPressを動かす方法(MAMP)

https://creive.me/archives/8217/

少し手間のかかるローカル環境の構築を助けてくれるソフトであるMAMPの導入から使い方までを解説してくれています。
実際の画像を用いながらナビゲーションしているので、この記事を見ながらMAMPが使える便利な記事です。

18.3章 XAMPPでWordPressの開発環境を構築しよう

【WordPress入門】ローカル環境でWordPressを使って見よう(XAMPP)

https://terakoya.sejuku.net/programs/79/chapters/953

ローカル環境を構築するのに必要なソフトを一度にインストールでき、初心者にうれしいソフトであるXAMPPの使い方を解説。
英語のソフトながら、実際に使ったキャプチャを使ってナビゲートしているので、誰でも使いこなすことが可能となっています。

【無料】WordPressのカスタマイズについて相談する

【まとめ】Wordpressカスタマイズのポイント

以上、WordPressの初心者の方に基本構造からカスタマイズの方法までを解説してきました。
ポイントを整理すると次の4つです。

  • Wordpressの構造を理解すること、自分でもカスタマイズしやすい
  • カスタマイズをするには「テーマ」の構造を理解することがポイント
  • CSSやPHPを知ると、より本格的なカスタマイズができる
  • カスタマイズをやってみて行き詰ったら、ホームページ制作会社に相談するのも一手

WordPressのカスタマイズと聞くと「とても無理無理」と最初から尻込みしてしまいがちですが、実際にやってみると「あれ?意外とできるかも!?」と思うことが多いです。
実際、筆者がその一人でした。

WordPressのカスタマイズに挑戦し、かゆい所に手が届くようになると、次の難易度のカスタマイズに挑戦したくなります。
Webサイトの成長が目に見えるのがWordPressのカスタマイズ。

この記事を読んで、ぜひ一度WordPressのカスタマイズに挑戦してください。

関連記事:【画像付き】WordPressの始め方。初心者が最初にやることやプラグイン・テーマを解説

Wordpressのカスタマイズをプロに任せたい方へ

制作会社をなかなか探す時間がない・制作会社の違いが分からないという方は、ぜひWeb幹事にご相談ください。
Web幹事は、あなたに最適な会社を「人力で」マッチングするサービス。
実際にWeb制作・運用を経験したプロのコンサルタントが対応するため、業者選びの手間なく、質の高いマッチングを受けることが可能です!

コンサルタントのご紹介 Web幹事 コンサルタント 岩田真 代表取締役
岩田 真
2015年にWeb制作会社を設立し、
3年間で上場企業を含む50社以上制作に携わらせていただきました。

ホームページ制作のオンライン相談窓口「Web幹事」は、35,000件を超える豊富な相談実績と幅広い知識で、お客様のあらゆるニーズにお応えします。

Web制作業界のプロが丁寧にヒアリングしますので、
初心者の方でも安心してご相談ください!

あなたの目的や予算に合わせて最適な会社をご紹介させていただきます。
ご相談はもちろん無料。また紹介された会社に必ず発注する必要はありません。

WordPressに強い制作会社を紹介してもらう

Q. WordPressのカスタマイズ料金はいくらですか?

WordPressのカスタマイズ料金の費用相場は、作業内容によって異なります。簡単な機能追加だと1万円~、難易度の高いページ追加・機能追加だと3万円~、スマホ対応(レスポンシブ化)にすると5万円~が相場です。

Q. WordPressのカスタマイズにはCSSとPHPの知識が必要ですか?

CSSとPHPの知識があればより高度なカスタマイズが可能ですが、初心者でもプラグインやテーマの設定を変更するだけでも十分なカスタマイズができます。