トップページ > サイト作成 > CMS > Wordpress > Wordpress で外観の変更とテーマの追加方法
Wordpress で外観の変更とテーマの追加方法
Wordpress は初期インストール時に数点のデザインが外観(テーマ)として用意されており、好みや用途に応じて変更できる他、有償や無償で配布されているテーマを新規に追加して利用する方法について紹介する。
このページの目次
1. Wordpress でテーマを変更する目的
Wordpress でテーマを変更する目的は、インターネット上に公開するウェブサイトやブログのデザインを変更するだけでなく、パソコンだけでなくスマホなど携帯端末にも対応した HTML と CSS 構造のテーマを用いたり、検索サイトで検索結果の上位に表示されやすいように SEO 対策されたテーマを利用するなど用途に応じて変更する。
手間をかけずにデザインを変更したり、HTML に不慣れな初心者は配布されているテーマを利用し、独自性を持たせたい企業サイトなどではテーマを流用して HTML や CMS をカスタマイズしてオリジナルのテーマを用意することができる。
2. Wordpress の初期インストール時のデザイン
Wordpress の初期インストール時のデザインはテーマ「Twenty Twenty」が有効化されており、このテーマは Wordpress が公式に 2020 年のデフォルトテーマとしてシステムに組み込んでいる。
テーマ「Twenty Twenty」をブラウザで表示すると下図のようになっている。
3. Wordpress でテーマを追加する方法
Wordpress でテーマを追加する方法は 2 通りある。
まず 1 つ目はテーマのファイル類を FTP ソフトなどでサーバに直接アップロードする方法である。
2 つ目は Wordpress の管理画面からテーマをアップロードしてインストールする方法で、これら 2 つのテーマを追加する方法は次の通りである。
3-1. テーマをダウンロードして取得
Wordpress にテーマを追加するためには、まず配布されておるテーマを入手する必要がある。
テーマは購入する有償のものと無償で配布されているものがあり、今回は無償で配布されている「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 ユーザとそのパスワードを入力してボタン「続行」をクリックするとテーマがアップロードされてインストールされる。
この時、サーバ側にアップロードやファイルの書き込み権限が無い場合は下図のように wordpress Warning: ftp_mkdir(): Create directory operation failed と示すように「ディレクトリを作成できませんでした。」と表示されるため、サーバ管理者に問い合わせて対応してもらうか、前述のテーマをサーバに直接アップロードする方法に切り替えるとよい。
4. Wordpress でテーマを変更する方法
Wordpress で追加したテーマや既にインストール済のテーマに変更する方法としては、管理画面の「外観」で利用できるテーマの一覧を表示させる。
次に利用したいテーマにマウスカーソルを合わすと下図のように有効化とライブレビューのボタンが表示されるため、ボタン「有効化」をクリックすると即座にインターネット上に公開しているサイトのデザインが変更される。
今回利用したテーマの benas を有効化すると下図のようになる。
テーマを有効化して変更した後は下図のようにボタン「カスタマイズ」が表示され、色や背景画像等を変更することができる。
関連記事
Wordpress
Wordpress は通常の投稿記事とは別に固定ページと呼ばれるコンテンツをインターネット上に公開することができ、その固定ページの作成方法と投稿記事との違いについて紹介する。
Wordpress で XML や CSV で記事をエクスポートする方法
Wordpress
Wordpress で公開しているウェブページや記事を他のブログや新しく用意した Wordpress に引っ越しする際に投稿した内容を出力するエクスポートの機能を利用するが、通常の XML で行う方法と CSV など違う形式でエクスポートする方法を紹介する。
Wordpress で記事を投稿するとコメントが入るのを止める方法
Wordpress
Wordpress に各記事に閲覧者からのコメントやそのコメントに対して返答して公開する機能があるが、自分が記事を投稿すると同時にコメントが入る事象が発生する場合の対応方法について紹介する。
Wordpress で他のブログの記事を引っ越す(インポート)方法
Wordpress
Wordpress は新規にウェブサイトやブログを公開する時に利用されるだけでなく、ブログ記事などを一括でインポートする機能を用いて他で公開していたサイトを引っ越す方法について紹介する。
Wordpress の記事作成で直接 HTML タグを入力する方法
Wordpress
Wordpress の記事作成や既に公開した記事を変更する場合は管理画面に用意された専用のエディターを利用するが、初期の状態では改行したいだけでも P タグの段落扱いになってしまうため、柔軟に対応するために直接 HTML タグを入力できるようにする方法について紹介する。