タグ: テーマ

【テーマのインストール】WordPressテーマ配布サイトと利用方法

17 8月 15
北川 哲平

No Comments

WordPressのテーマは無料のものだけせなく、有料で販売されているものまで世界中で作成され配布されています。
ここでは、テーマを配布しているサイトのご紹介と実際の使い方について解説します。
なお実際に使われる時は各サイトの利用規約などをご自身で確認した上でご利用下さい。
 
1.WordPress.orgのテーマディレクトリー
2.クリエイターの方がホームページで公開されているオリジナルテーマ

 

 

WordPress.orgのテーマディレクトリー

 
WordPressの公式サイトでもテーマを探すことができます。
 
⇒ https://wordpress.org/
 
公式サイト


画面上部にある「Themes」と書かれたリンクをクリックして下さい。テーマディレクトリー画面が表示されます。
 
テーマディレクトリ


ここで公開されているテーマは無料で利用できます。それでは例として検索ボックスに「business」と入力して下さい。
 
検索結果が表示されます。
 
business検索


それでは検索結果に表示されたテーマのいずれかをクリックして下さい。
今回は”CorporateBusiness”と書かれたテーマをクリックしました。するとそのテーマに関する情報が表示されます。
 
テーマ情報


画面右上、「Download」の左にある「Preview」ボタンを押すと、テーマのプレビュー画面が表示されます。
 
プレビュー


画面左上の「Download」ボタンを押すとテーマのダウンロードが開始されます。
 
ダウンロード


ダウンロードしたファイルはZIPアーカイブのファイルとなっています。
このファイルをインストールすれば先程のテーマをご自分のホームページで利用することができます。(ZIPアーカイブのファイルをインストールする手順については「ZIPアーカイブを手動でインストール」をご参照下さい)。
 

 

 

クリエイターの方がホームページで公開されているオリジナルテーマ

 
テーマのギャラリーサイトなども数多くありますが、クリエイターの方がご自身で作成したオリジナルテーマをホームページなどで公開されている場合もあります。今回はWebクリエイターボックスさんのホームページで公開されているテーマについてご紹介します。
 
⇒ https://www.webcreatorbox.com/webinfo/free-wordpress-theme-new-world/
 
クリエイターボックス


配布されているテーマは1つだけですので、ダウンロードと書かれたリンクをクリックして下さい。すぐにテーマのZIPアーカイブファイルがダウンロードされます。
 
ダウンロード


ZIPアーカイブを使ったテーマのインストールは先に記載させて頂いた通りです。今回は実際にテーマをインストールした上で有効にしてみました。
 
有効化


ホームページを表示してみると次のように表示されます。
 
サイト表示確認


このようにWordPressのテーマは色々な場所で公開されています。いいテーマを見つけて試してみて下さい。なおテーマの利用規約はそれぞれ異なっていますので、実際に利用される場合は公開されているサイトの注意事項などを良く読んだ上でご利用下さい。

【テーマのインストール】ZIPアーカイブのテーマを手動でインストール

17 8月 15
北川 哲平

No Comments

テーマは複数のPHPファイルや画像などで構成されており、それらのファイルをZIP形式でアーカイブしたものをテーマとして配布しています。
管理画面でテーマを検索しインストールする場合は、必要なファイルのダウンロードと配置を自動で行なってくれますが、他のWebサイトなどで配布されているテーマインストールする場合には、ZIPファイルで取得したものを手動でインストール必要があります。
 
ここではZIPアーカイブのファイルで持っているテーマを手動でインストールする手順について解説します。
 
1.管理画面経由でインストール
2.手動でインストール
 
※ 管理画面からテーマを検索しインストールする方法については「テーマのインストールと切り替え」をご参照下さい。

 

 

管理画面経由でインストール

 
1つ目の方法は管理画面経由でインストールする方法です。左側メニューの中の「外観」メニューの中にある「テーマ」メニューをクリックして下さい。
 
テーマ


「テーマ」画面が表示されます。画面上部の「新規追加」をクリックして下さい。
 
新規追加


「テーマを追加」画面が表示されます。
 
テーマを追加


画面上部にある「テーマのアップロード」と書かれたリンクをクリックして下さい。
 
テーマのアップロード


「ファイルを選択」ボタンを押してインストールするテーマのZIPアーカイブファイルを選択して下さい。
 
ファイルを選択


「いますぐインストール」ボタンを押して下さい。
 
いますぐインストール


これでテーマのインストールは完了です。
 
インストール完了


「テーマ」画面を開いて確認してみると、利用可能なテーマに先程インストールしたテーマが追加されていることが確認できます。
 
テーマ


 

 

 

手動でインストール

 
ZIPアーカイブされたファイルを解凍し、WordPressのテーマを格納するディレクトリに手動でアップロードすることでテーマをインストールすることが可能です。
 
まずテーマのZIPアーカイブを解凍します。下記は”responsive_216″ディレクトリという中に複数のファイルやディレクトリが格納されています。
 
wp343


この”responsive_216″ディレクトリを丸ごと「(wordpressをインストールしたディレクトリ)/wp-content/themes/」の下へコピー(アップロード)します。
 
wp344


インストールは以上で完了です。
WordPressの管理画面で「テーマ」画面を開いて確認してみると、利用可能なテーマに先程インストールしたテーマが追加されていることが確認できます。
 
wp345


このようにZIPアーカイブの形でテーマのファイルを持っている場合でも、非常に簡単にインストールすることが可能です。

【テーマのインストール】テーマのインストールと切り替え

17 8月 15
北川 哲平

No Comments

WordPressでは標準で用意されているテーマだけでなく別のテーマをインストールして利用することができます。WordPress用のテーマは無料のものや有料のものなど数多く公開されていますので、作成するホームページのイメージにあったテーマを探しインストールすることで簡単にホームページの外観を変更することができます。
 
ここではWordPressの管理画面からテーマをインストールし、テーマを切り替える方法について解説します。
 
1.テーマのインストール画面
2.キーワード/作者/タグで検索
3.機能で検索
4.プレビューとインストール
5.テーマを切り替える
 
※ ZIPアーカイブで取得したテーマを手動でインストールする方法については「ZIPアーカイブのテーマを手動でインストール」をご参照下さい。

 

 

テーマのインストール画面

 
テーマのインストールを行なうには管理画面にログイン後、左側メニューの中の「外観」メニューの中にある「テーマ」メニューをクリックして下さい。
 
テーマ


開いた画面で「新規追加」ボタンをクリックして下さい。
 
新規追加


「テーマを追加」画面が表示されます。
 
テーマを追加画面


この画面でインストールするテーマを選択または検索し、その中から気に入ったテーマをインストールするという手順になります。
 

 

 

キーワード/作者/タグで検索

 
画面右上に表示されている検索ボックスでは、「キーワード」「作者」「タグ」などお好きな言葉からテーマを検索できます。
 
検索


例として”business”で検索してみます。すると377個のテーマが見つかりました。
 
キーワードbusiness


同じように、今度は”simple”で検索してみます。今度は434個のテーマが見つかりました。
 
キーワードsimple


気に入ったテーマがありましたら、各テーマの上にカーソルを移動させます。
すると、「詳細&プレビュー」と書かれたボタンが表示されますので、そちらをクリックして下さい。
実際のプレビュー画面に加え、そのテーマのバージョンや評価、そして作者の名前などが表示されます。
今度はその作者の名前で検索すれば、同じ作者が作成した別のテーマを見つけることができます。
 
詳細&プレビューボタン
 
詳細&プレビュー


 

 

 

機能で検索

 
機能でテーマを検索することもできます。
「テーマを追加」の画面から、「特徴フィルター」をクリックして下さい。
 
特徴フィルター


「色」「レイアウト」「機能」「題名」などの項目にわかれたものの中から検索したい機能のチェックボックスをクリックすることで、
該当するもののみを検索することができます。
例として、「可変レイアウト」「3列」「カスタムヘッダー」のテーマを検索してみます。
該当するチェックボックスにチェックをして、画面左上の「フィルターを適用」ボタンを押して下さい。
 
フィルターの適用


該当するテーマが107個見つかりました。
 
該当テーマ


また、検索する以外にも画面上部の「注目」「人気」「最新」のリンクからテーマを閲覧することが可能です。
 
特徴リンク


 

 

 

プレビューとインストール

 
検索した結果、表示されたテーマには「プレビュー」と「インストール」の二つのリンクが表示されています。
 
プレビューとインストール


「プレビュー」と書かれたリンクをクリックするとプレビュー画面を見ることができます。(プレビューを閉じる時は、左上にある×マークをクリックして下さい)。
 
プレビュー


テーマをインストールする場合は「インストール」と書かれたリンクをクリックして下さい。
クリックすると、すぐにインストールが開始されます。
 
必要なファイルが自動的にダウンロードされ、テーマのインストールが完了します。
 
インストール


テーマで使用されるファイルは既にインストールされているテーマと同じく「(wordpressをインストールしたディレクトリ)/wp-content/themes/」以下に配置されます。
 
インストールデータの配置場所


 

 

 

テーマを切り替える

 
ホームページで使用するテーマを現在使っているテーマから別のテーマに切り替えるには、新しく使用するテーマを有効にします。
左側メニューの中にある「外観」メニューをクリックし、さらに「テーマ」メニューをクリックして下さい。「テーマ」画面が表示されます。
 
テーマ画面


表示されている左上が現在使用しているテーマ、それ以外がインストール済みの他のテーマとなります。
 
テーマを変更し新しいテーマに切り替えるには、使用したいテーマの上にカーソルを移動させ、下部に表示される「有効化」と書かれたリンクをクリックして下さい。
 
テーマの有効化


有効化したテーマが現在のテーマになります。
 
テーマ変更完了


ではホームページを表示してみます。
ホームページに投稿されている記事などのデータはそのままですがホームページの外観は有効化したテーマを使って表示されます。
 
サイト表示


このようにテーマを切り替えることでホームページの外観を簡単に変更することが可能です。

【テーマを使った外観の変更】ウィジェットの設定

12 8月 15
北川 哲平

No Comments

ウィジェットというのは特定の機能を実現するためのパーツのようなものです。リンク集やカレンダーなどをホームページに表示する場合、その機能を持ったウィジェットをサイドバーやフッターなどに追加することで実現できます。ここではウィジェットの使い方について解説します。
 
1.ウィジェットとは
2.ウィジェットの有効化
3.ウィジェットの無効化と一時使用停止

 

 

ウィジェットとは

 
ウィジェットの設定を行なうには管理画面にログイン後、左側メニューの中の「外観」メニューの中にある「ウィジェット」メニューをクリックして下さい。
 
ウィジェットメニュー


「ウィジェット」画面が表示されます。
 
ウィジェット画面の表示


「利用できるウィジェット」と書かれているところに、使用することができるウィジェットの一覧が並んでいます。
 
画面右側には「SubContents」や「SideBar」と書かれているエリアがあります。このエリアには既にいくつかのウィジェットが表示されていると思いますが、このエリアに表示されているウィジェットは実際にホームページを表示した時にサイドバーに表示されています。
 
設定確認


現在SubContentsには、「テキスト」「カスタムメニュー」「最近の投稿」「アーカイブ」といった感じでウィジェットが表示されています。ではホームページを表示してみるとウィジェットが並んでいた順にサイドバーに表示されていることが分かります。
 
サイドバー表示


このようにサイドバーやフッターに何か機能を追加したい時は、ウェジェットの画面で追加したい機能を持つウィジェットをメインサイドバーやフッターに追加します。
 

 

 

ウィジェットの有効化

 
ウィジェットを有効化するには、目的のウィジェットをサイドバー又はフッターエリアにドロップします。今回は例として「テキスト」ウィジェットをSubContentsの「テキスト:自己紹介」ウィジェットの上にドロップしてみます。
 
テキストウィジェット
 
テキストウィジェットの移動


ウィジェットはそれぞれ機能が異なりますので有効化した後でそのウィジェット毎に必要な追加設定を行います。「テキスト」ウィジェットの場合は、任意のテキストやHTMLを表示するためのものなのでタイトル及び表示したいテキスト又はHTMLを記述します。
 

テキストの入力


ウィジェット内の右下あたりに表示されている「保存」ボタンを押すと設定が反映されます。編集画面を閉じるには「閉じる」と書かれたリンクをクリックして下さい。これでウィジェットの有効化は完了です。
 
ウィジェットの有効化


ウィジェットの設定を行いたい場合は、ウィジェットの右端に表示されている▼をクリックして下さい。
 
▼をクリック


ウィジェットの設定画面が開きます。
 
ウィジェットの設定画面


ウィジェットを初めて追加した場合と同じく、設定内容を変更した場合は「保存」ボタン、設定画面を閉じる場合は「閉じる」リンクをクリックして下さい。
 
それではホームページを表示してみます。先程追加した「テキスト」ウィジェットがサイドバーに表示されていることが確認できます。
 
表示確認


 

 

 

ウィジェットの無効化と一時使用停止

 
ウィジェットを無効にするには先程とは逆に、メインサイドバーやフッターに追加されているウィジェットを「利用できるウィジェット」エリアへドロップします。
 
ウィジェットの無効化
 
ウィジェットの無効化


ドロップしたウィジェットが無効になります。
 
無効化完了


この手順でウィジェットを無効にすると、ウィジェットに設定してあった内容が消えてしまいます。もしウィジェットを無効にするのではなく、一時的に使用を停止したい場合は、「利用できるウィジェット」エリアではなく下部にある「使用停止中のウィジェット」エリアにドロップして下さい。(あらかじめ「使用停止中のウィジェット」の▼をクリックして開いておく必要があります)。
 
ウィジェットの停止
 
ウィジェットの停止


「使用停止中のウィジェット」にあるウィジェットは設定された内容がそのまま保持されていますので、また必要になった時は「使用停止中のウィジェット」からサイドバーへドロップすることで設定を保持したまま有効化を行なうことができます。
 
以上のように、ウィジェットを使うことでサイドバーやフッターに必要な機能を簡単に追加することが可能です。

【テーマを使った外観の変更】カスタム背景の設定

12 8月 15
北川 哲平

No Comments

ホームページの背景に関する設定を行います。任意の画像をアップロードして背景に設定したり、背景色を指定することができます。画像を使用した場合は一度だけ表示するのか並べて表示するのかを指定したり、画面スクロールした場合の表示方法などを細かく設定可能です。
 
1.背景に使用する画像をアップロード
2.オプション(繰り返し)
3.オプション(位置)
4.オプション(スクロールの有無)
5.画像を削除
6.背景色を変更
 

 

 

背景に使用する画像をアップロード

 
背景の編集を行なうには管理画面にログイン後、左側メニューの中の「外観」メニューの中にある「背景」メニューをクリックして下さい。
 
背景メニュー


「背景画像」の設定画面が表示されます。
 
背景画像


ではまず背景画像をアップロードして設定してみます。「画像を選択」をクリックし、「ファイルを選択」ボタンを押してアップロードする画像を選択して下さい。ファイルを選択したら「アップロード」ボタンを押して下さい。
 
画像を選択


ファイルを選択


今回指定した画像は次のものです。
 
背景画像


背景画像がデフォルトの設定を使って背景に設定されます。
 
デフォルト設定


画像をアップロードすると、画像をどのように背景に設置するのかを指定するいくつかのオプションが表示されます。
 
オプション表示


ではオプションの値によってどのように変わるのかを確認してみます。
 
 

 

 

オプション(繰り返し)

 
まず「繰り返し」についてです。画像が背景の大きさよりも小さい場合に繰り返し表示するかどうかを設定します。
 
繰り返しなし: 画像を1回だけ表示
 
1回表示


タイル:水平方向及び垂直方向に繰り返し表示
 
水平垂直


水平方向に繰り返し:水平方向に繰り返し表示
 
水平


垂直方向に繰り返し:垂直方向に繰り返し表示
 
垂直


それでは「タイル」の場合と「垂直方向に繰り返し」を選んだ場合にホームページでどのように表示されるのかを確認してみます。
 
タイル:
 
タイル


垂直方向に繰り返し:
 
垂直


 

 

 

オプション(位置)

 
続いて「位置」についてです。画像を背景のどの位置で表示するのかに関して「左」「中央」「右」から選択します。「繰り返し」の値が「繰り返しなし」か「垂直方向に繰り返し」の場合だけ意味があります。(下記では「垂直方向に繰り返し」にしてあります)。
 
左:画像を左寄せで表示
 
左寄せ


中央:画像を中央に表示
 
中央


右:画像を右寄せで表示
 
右寄せ


それでは「画像を右寄せで表示」を選んだ場合にホームページでどのように表示されるのかを確認してみます(繰り返しは「垂直方向に繰り返し」です)。
 
表示確認


 

 

 

オプション(スクロールの有無)

 
最後に「スクロールの有無」についてです。「スクロール」を選択しホームページ画面をスクロールすると、それに合わせて背景画像もスクロールします。「固定」を選択するとホームページ画面をスクロールしても、背景画像は同じ位置に表示されたままとなります。
 
今回は分かりやすいように次のような画像をアップロードしました。繰り返しは「垂直方向に繰り返し」、位置は「左」です。
 
画像のアップロード


それではホームページを表示してスクロールの有無の設定によってどのように違うのかを確認してみます。
 
スクロール:画面スクロールに合わせて画像もスクロール
 
スクロール
 
スクロール


固定:画面スクロールしても画像はそのまま
 
固定
 
固定


 

 

 

画像を削除

 
背景に設定した画像を削除したい場合は、「背景画像」で設定した画像の下にある「削除」ボタンを押して下さい。
 
削除


背景画像が削除されました。
 
背景画像の削除


 

 

 

背景色を変更

 
「色」の部分で、背景色を指定することができます。
 
背景色の選択


デフォルトは「#e2e2e2」が設定されています。色の指定はHTMLカラーと同じで「#RRGGBB」の形式で直接値を入力するか、「色を選択」ボタンを押すと表示される色のサンプルから色を選択して下さい。
 
今回は「#ff0000」を設定してみました。色を設定した時点で、サンプルが右側に表示されます。
指定の色で問題がなければ、「保存して公開」ボタンを押して頂くと、変更内容がサイトへ反映されます。
 
表示確認


なお設定した色を削除する場合は「デフォルト」と書かれたリンクをクリックして下さい。
 
デフォルトをクリック


背景色と背景画像の両方指定した場合は、背景色の上に画像が表示されることになります。