トップページ > サイト作成 > CMS > Wordpress > Wordpress で外観の変更とテーマの追加方法

Wordpress で外観の変更とテーマの追加方法

Wordpress は初期インストール時に数点のデザインが外観(テーマ)として用意されており、好みや用途に応じて変更できる他、有償や無償で配布されているテーマを新規に追加して利用する方法について紹介する。

Wordpress で外観の変更とテーマの追加方法

1. Wordpress でテーマを変更する目的

Wordpress でテーマを変更する目的は、インターネット上に公開するウェブサイトやブログのデザインを変更するだけでなく、パソコンだけでなくスマホなど携帯端末にも対応した HTML と CSS 構造のテーマを用いたり、検索サイトで検索結果の上位に表示されやすいように SEO 対策されたテーマを利用するなど用途に応じて変更する。

手間をかけずにデザインを変更したり、HTML に不慣れな初心者は配布されているテーマを利用し、独自性を持たせたい企業サイトなどではテーマを流用して HTML や CMS をカスタマイズしてオリジナルのテーマを用意することができる。

2. Wordpress の初期インストール時のデザイン

Wordpress の初期インストール時のデザインはテーマ「Twenty Twenty」が有効化されており、このテーマは Wordpress が公式に 2020 年のデフォルトテーマとしてシステムに組み込んでいる。
テーマ「Twenty Twenty」をブラウザで表示すると下図のようになっている。

テーマ「Twenty Twenty」のデザイン

3. Wordpress でテーマを追加する方法

Wordpress でテーマを追加する方法は 2 通りある。
まず 1 つ目はテーマのファイル類を FTP ソフトなどでサーバに直接アップロードする方法である。
2 つ目は Wordpress の管理画面からテーマをアップロードしてインストールする方法で、これら 2 つのテーマを追加する方法は次の通りである。

3-1. テーマをダウンロードして取得

Wordpress にテーマを追加するためには、まず配布されておるテーマを入手する必要がある。
テーマは購入する有償のものと無償で配布されているものがあり、今回は無償で配布されている「beans」を利用する。

テーマ「beans」の公式サイト

「beans」の公式サイトにアクセスし、ボタン「Download for free」をクリックすると配布されているテーマの最新版が圧縮された ZIP ファイルでダウンロードすることができる。
尚、今回ダウンロードしたファイル名は「beans-1.5.1.zip」となっている。

3-2. テーマをサーバに直接アップロードする場合

入手したテーマをサーバに直接アップロードしてインストールする場合は、まず入手したテーマが圧縮されていれば解凍してフォルダの状態にする。 今回利用する beans は解凍すると tm-beans というフォルダが作成される。

次に、ファイルをサーバに転送できる FTP や SFTP ソフトなどを利用して解凍したフォルダ「tm-beans」を Wordpress があるディレクトリ内の wp-content/themes にアップロードする。

テーマをサーバにアップロード

上図は Wordpress のデフォルトの状態でテーマをアップロードする場合であり、既にテーマ「Twenty Twenty」等があるのがわかる。

テーマをサーバに直接アップロードして管理画面より「外観」を表示すると、beans が自動的にて認識して追加されているのが確認できる。

管理画面に追加されたテーマ

3-3. テーマを管理画面からアップロードする場合

入手したテーマを Wordpress の管理画面からアップロードしてインストールする場合は、テーマのファイルが圧縮された状態のまま利用する。
まず管理画面より「外観」をクリックしてインストール済みのテーマ一覧の画面を表示し、ボタン「新規追加」を選択する。

外観 -> 新規追加を選択

テーマを追加の画面では管理画面上から直接ダウンロードしてインストールできるテーマが表示されるが、今回は自身で入手したテーマをインストールするためボタン「テーマのアップロード」をクリックする。

テーマのアップロードをクリック

次に下図のように自身が持つテーマをアップロードするためにボタン「参照」をクリックしてテーマの圧縮ファイルを選択し、その横のボタン「今すぐアップロード」をクリックする。

ファイルを選択してインストール

最後に、テーマの圧縮ファイルのアップロードは FTP で行われるためサーバのホスト名、FTP ユーザとそのパスワードを入力してボタン「続行」をクリックするとテーマがアップロードされてインストールされる。

FTP 接続の情報を入力してボタン「続行」をクリック

この時、サーバ側にアップロードやファイルの書き込み権限が無い場合は下図のように wordpress Warning: ftp_mkdir(): Create directory operation failed と示すように「ディレクトリを作成できませんでした。」と表示されるため、サーバ管理者に問い合わせて対応してもらうか、前述のテーマをサーバに直接アップロードする方法に切り替えるとよい。

ディレクトリを作成できませんでした。の表示

4. Wordpress でテーマを変更する方法

Wordpress で追加したテーマや既にインストール済のテーマに変更する方法としては、管理画面の「外観」で利用できるテーマの一覧を表示させる。
次に利用したいテーマにマウスカーソルを合わすと下図のように有効化とライブレビューのボタンが表示されるため、ボタン「有効化」をクリックすると即座にインターネット上に公開しているサイトのデザインが変更される。

テーマの有効化

今回利用したテーマの benas を有効化すると下図のようになる。

テーマ benas のデザイン

テーマを有効化して変更した後は下図のようにボタン「カスタマイズ」が表示され、色や背景画像等を変更することができる。

有効化した後のテーマの状態

関連記事