The post WPテーマ “ハミングバード” で光るリンクボタンを作る方法 first appeared on Fukuro Press.
]]>
ブロガー向けテーマのハミングバード
このテーマではショートコードを使うと、色々なリンクボタンが簡単に作れちゃいます。
そしてそのリンクボタン、
少し細工をするだけで、ピカピカ光らせることも可能です。
↓例えば次動画みたいな感じで
こういうエフェクトが付いてると、リンクボタンをもっと目立たせられます。
そこで、ハミングバードで光るリンクボタンを作る手順をまとめました。
特別な知識が無くても、コピペでできる方法です。数分でできるので是非お試しください！
光るリンクボタンを作る手順
その作り方はとても簡単
次の手順を順番に行っていけばいいだけです。
１．ショートコードを投稿画面に追加する
初めにやるべきことは、
ハミングバード用ショートコードを投稿画面に追加をすること
別にショートコードは手書きしても問題ありません。
でもなるべくなら、投稿画面から一発挿入できたら便利ですよね？
なので最初は投稿画面から楽に挿入できる準備をしておきましょう。
その投稿画面から挿入する方法については次記事をチェック
光るボタンを作る前に、まずは上記事の手順を試してください。
ショートコード挿入が超便利になります。
投稿画面から クイックタグ というのを使って、一発で入れられるようになるので
２．光るボタン用CSSコードを追加する
お次にやるべきこと・・・
それは光るリンクボタンを作るための専用CSSの追加
その手順は次の通りです。
まずハミングバードの style.css を開いてください。
WordPressから直接開く場合、
メニューから「外観」ー＞「テーマエディター」をクリックすれば開けます。
ちなみに WP5.2以前 なら「テーマの編集」となっているので、そちらを開けばOK
もし「下手にテーマを編集したくない！」という場合は、
プラグインを使ってCSS追加するのもアリです。
次記事で紹介した Custom CSS and JS っていうプラグインが特にオススメ
詳しい使い方とかは上記事をご覧ください。
テーマと完全に切り離して、CSSを管理できて便利です。
ではCSSを追加できる準備ができたら、
次のカスタムCSSをWordPressに追加してみましょう。
/** 大きいボタンをキラキラさせる */
.btn-wrap.big a{
display: block;
position: relative;
overflow: hidden;
}
.btn-wrap.big a:after{
content: "";
display: block;
width: 30px; height: 200px;
position: absolute;
left: -30%; top: 50%;
background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255, .8) 50%,rgba(255,255,255,0) 100%);
background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,.8)),color-stop(100%,rgba(255,255,255,0)));
transform: rotate(45deg) translateY(-60%);
-webkit-transform: rotate(45deg) translateY(-60%);
animation: shine 3s infinite linear;
-webkit-animation: shine 3s infinite linear;
}
@keyframes shine {
0% { left: -30%; }
25% { left: 130%; }
100% { left: 130%; }
}
@-webkit-keyframes shine {
0% { left: -30%; }
25% { left: 130%; }
100% { left: 130%; }
}これは 本当に丸々コピペでOK です。
どこか一部を改変したり、環境に合わせて変更とかも必要ありません。
ハミングバードを使ってるなら、このCSSを追加するだけでリンクボタンがキラキラ光ってくれるようになります。
３．実際に光るリンクボタンを作ってみよう
最後に、実際に光るリンクボタンを作ってみましょう。
とは言ってもショートコードを追加するだけなんですけどね
一応やり方を説明しておくと次の通り
まず初めに、光るボタンを挿入したい投稿の編集画面を開きましょう。
そして投稿画面のツールメニューから「Quicktags」をクリック
↓オレンジ色の枠で囲ったものを開く
そうすると挿入できるショートコード一覧が表示されます。
その中から 【ボタン】 で始まるショートコードをクリックすればOK
↓挿入したいボタンのクイックタグをクリックしよう
今回の場合、光るボタンが有効になるのは、
- 【ボタン】ビッグサイズ、
- 【ボタン】大きい目立つボタン
- 【ボタン】背景付き（グレー）ボタン
- 【ボタン】背景付き（黄色）目立つボタン
この４種類
お好きなボタンを投稿画面に挿入してみてください。
例えば 【ボタン】ビッグサイズ を選んだ場合、
次のようなショートコードが挿入されたはず
[btn class="big"][/btn]あとはこの [btn class="big"] と [/btn] の間にテキストリンクを追加するだけです。
そうすれば立派にピカピカ光るボタンになってくれます。
ただし１つ注意点があるとすれば・・・
普通の "テキスト" ではなく "テキストリンク" を挿入しないとダメということ
まあリンクボタンを作りたいのに、テキストだけ挿入するって使い方はしないと思いますが念のため・・・
ちなみに、どんな光り方をするかというと次動画の通り
↓キラキラ光ってるボタンのサンプル
今回の場合だと、３秒おきに左から右にキランッと光るエフェクトを付けてみました。
もちろんCSSがある程度分かるなら、光り方とか調整するのも面白いですね。
以上がハミングバードで光るリンクボタンを作る手順
ほんの少しのCSSをコピペ追加すれば超簡単に作れてしまいます。
もし分からないこと・疑問点があるなら コメント欄 にどうぞ
ハミングバード活用術の関連記事
今紹介した光るボタンの作り方みたいに、
他にもハミングバードの活用術は色々紹介してます。
↓ハミングバード活用術の関連記事
特に吹き出しショートコードは使いこなせると便利ですね。キャラ同士に会話させれば、記事内容がもっと分かりやすくなること間違いありません。
記事内容を華やかにしたり、目立たせるのに役立つはずです。
まとめ
以上、ハミングバードで光るリンクボタンを作る手順でした。
普通のリンクボタンでも十分目立ちますが、
光るエフェクトを付ければ、さらにクリック率向上が期待できると思います。
The post WPテーマ “ハミングバード” で光るリンクボタンを作る方法 first appeared on Fukuro Press.
]]>The post WPテーマ “ハミングバード” の吹き出しでキャラに喋らせる方法 first appeared on Fukuro Press.
]]>
ブログ向けWordPressテーマの ハミングバード
これを使うとキャラ画像の横に吹き出し表示して喋らせることができます。
↓例えばこんな感じで
画像とセリフさえ用意すれば、ショートコードで楽々挿入可能
とはいえ、初めて使う人の中には「どうやって台詞を喋らせればいいかさっぱり・・・」という方も多いかもしれません。
そこでハミングバードで吹き出しを使ってキャラに喋らせる手順をまとめました。
また特定キャラの吹き出しをワンクリックで挿入する方法も最後に紹介します。
キャラに吹き出しをつけて喋らせる基本手順
吹き出し表示するには次の手順を順番に行っていくだけです。
１．まずキャラ画像を用意しよう
まずやるべきことは喋らせたいキャラ画像の用意
なので最初に画像素材サイトからお気に入りのキャラ画像を探してDLしておきましょう。
ちなみに・・・
キャラ探しする場合は次の素材サイトで探すのがオススメ
個人的によく使っているのはイラストAC
ここは所属イラストレーターが多いので、高クオリティの素材が見つかりやすいです。
た・だ・し、もしあなたが
「ありふれた素材じゃなくて、完全オリジナルなキャラ画像を使いたい・・・」
こう思っているならイラストを外注してみるのも手ですね。
イラスト外注は次サービスに登録すれば依頼可能です。
特に ココナラ の場合、 千円からでもイラスト依頼できる のが利点
また出品者と直接相談すれば、笑い顔や驚き顔などの差分付きキャラ画像も作成可能です。
どういうサービスが出品されているかは、
実際に登録して 【 似顔絵・イラスト・漫画カテゴリ
】から探してみてください。
世界に１つだけしかないキャラ画像が作れます。
２．作成・DLしたキャラ画像をアップロードしよう
そうしたら次にキャラ画像をWordPressにアップロードします。
この時、アップしたキャラ画像のURLをコピーするのを忘れないでください。
その手順は知ってる方も多いかもですが、次の通り
まずメニューから「メディア」ー＞「新規追加」をクリック
クリックすると画像一覧が表示されたはず
そうしたら画面上の「新規追加」ボタンを押し、さらに「ファイルを選択」ボタンを押してファイル選択ダイアログからキャラ画像をアップロードします。
↓次画像で赤枠で囲んだボタンをクリックすればOK
この時アップロードするキャラ画像のサイズはあまり大きすぎない方がいいです。
大きすぎると表示速度的にもマイナスなので、
50ピクセル～100ピクセルの範囲でキャラ画像をリサイズしておきましょう。
あとハミングバードではキャラ画像の周りが丸く縁どられるので、余白必須です。
もし余白が全くないなら、白色で適当な余白を作っておいてください。
| WEBブラウザ上で動作する無料の画像編集ツール。画像の拡大・縮小や切り抜き、回転などの処理をすることができます。 オンライン イメージ エディター | PEKO STEP - PEKO STEP |
↑余白作成ならオンラインで画像編集できるツールを使うのが楽
ではキャラ画像がアップできたら、画像一覧からその画像をクリック
画像詳細のダイアログが表示されたと思います。
その中で下画像の赤枠で囲った
「URL」内の画像URLをコピーしておくか、どこかにメモしておきましょう。
画像URLが分からないとキャラに吹き出し表示できないので、URLのチェックをお忘れなく！
これでハミングバードで吹き出し表示する準備はほぼ完了です。
３．吹き出し表示するショートコードを作ろう
では最後にショートコードを使ってキャラに吹き出し表示してみましょう。
ただしショートコード直書きは超大変なので、
投稿画面からワンクリックで挿入できるように設定しておくと便利です。
その設定手順は次記事で解説したので要チェック
まずはこの手順を試すのが先です。設定自体は数分もかからないのでお試しあれ
上の手順通りにすれば、投稿画面からハミングバード専用のショートコードが挿入できるようになったはず
登録したショートコードの中には吹き出しも含まれてます。
なので、キャラに吹き出し表示するためにツールバーから「Quicktags」をクリック
それを押したら一覧が出てきますが、その中で 【吹き出し】 と最初についてるのがキャラにセリフを喋らせる用のショートコードです
↓【吹き出し】と付いているものに注目！
上画像みたいに Facebook風 とか LINE風 とか色々な種類が選べます。
今回はオーソドックスな 【吹き出し】LINE風（右） を選んでみましょう。
投稿本文内に次みたいなショートコードが挿入されましたよね？
[voice icon="アイコンURL" name="名前" type="r line"][/voice]
このショートコードで赤色マーキングした部分に注目
「アイコンURL」を先ほどコピーしたキャラ画像URL、「名前」を好きなキャラ名に置き換えてください。
例えば次がオリジナルキャラにセリフを喋らせる書き方の例
[voice icon="https://example.com/wp-content/uploads/2019/05/usami.png" name="宇佐美" type="r line"]むしゃむしゃポリポリ、ニンジンうめ～～[/voice]
こういう風に書いて投稿を保存すると、実際にキャラが台詞を喋ってくれます。
↓作成した吹き出し付きキャラ画像の例
初期状態だと吹き出しが左、キャラ画像が右に表示されます。
もし吹き出しとキャラの位置を逆にしたいなら、
type="r line" の部分を次みたいに type="l line" に置き換えればOK
[voice icon="アイコンURL" name="名前" type="l line"][/voice]
キャラを右（right）に置くなら r 、
キャラを左（left）に置くなら l にする、
こういう感じで覚えると分かりやすいです。
↓ちなみに次が吹き出しの表示例
もしキャラ同士で会話させるなら、このテクニック必須なので必ず覚えておきましょう。
以上がハミングバードで吹き出しを表示させる方法
ここではLINE風吹き出しを例に出しましたが、他の吹き出しでも設定方法は全く同じです。
個人的にはシンプルな吹き出しより Facebook風 or LINE風 の吹き出しを使った方が、キャラのセリフを目立たせるのに効果的かな、と思います。
そこは各人の好みで使い分けてください。
特定キャラの吹き出しを一発で挿入するには
今紹介した吹き出し表示する方法、これには少し面倒なところがあります。
それはいちいち画像URLと名前を設定しないといけないこと
キャラに喋らせるたびに手動入力するのも面倒だし、一発でショートコードから挿入で来たら便利ですよね。
なので最後に特定キャラの吹き出しをワンクリックで挿入する方法も紹介します。
では手始めに AddQuicktag プラグインの設定画面を開きましょう。
開き方はメニューから「設定」ー＞「AddQuicktag」をクリックすればOK
そうしたら何も入力されていない空のクイックタグを探してください。
↓こんな感じの未編集のクイックタグを探す
そこに特定キャラ用の吹き出しショートコードを追加していきます。
ではまず「ボタン名*」のところに任意のクイックタグ名を入力
↓オレンジ色の枠で囲った部分にボタン名入力
ここの名前は分かりやすいなら何でもいいです。
ただし、ボタン名の最初は 【吹き出し】 で統一し、その後にキャラ名や表情名（笑顔、驚き、悲しみなど...）を付けておくと分かりやすいかも
そして次に「ラベル名」に半角英数字でボタンの識別名を入力
↓オレンジ色の枠で囲った部分にラベル名入力
ここは "hukidashi_usami_taberu" みたいに半角文字だけ使って日本語は使わないように気を付けましょう。
なるべく「吹き出しだということ」と「キャラ名と表情名」が分かるラベル名にするのがベストですね。
そして最後は「開始タグ*」と「終了タグ(s)」にショートコードを入力すればOK
↓オレンジ色の枠で囲った部分に入力
この時の注意点として、
開始タグには [/voice] を入力せず、終了タグに [/voice] を含めるようにしてください。
例えば先ほど例として挙げた次のようなショートコードで考えてみます。
[voice icon="アイコンURL" name="名前" type="r line"][/voice]
この例でいえば、開始タグに含めるのは [voice icon="アイコンURL" name="名前" type="r line"] まで、終了タグに含めるのは [/voice] のみということ
この設定を間違えるとショートコードが機能しないので要注意です！
そうしたら最後に右側に表示されてるチェックボックスを全部チェック
↓右側のチェックボックスを押せば全部オンになる
チェックしておかないと投稿画面からショートコード挿入できないので、必ず全部をオンにしておきましょう。
後は「変更を保存」ボタンを押せば専用キャラの吹き出し完成
笑顔とか悲しみとか驚きとか表情ごとのショートコードを作っておけば、吹き出しの編集作業も楽になります。
ハミングバード活用術の関連記事
今紹介したキャラを喋らせる方法みたいに、
このブログではハミングバードの活用術を色々紹介してます。
↓現在公開中のハミングバード活用術はコチラ
記事内容を分かりやすくしたり、目立たせるのに役立つはずです。
特別な知識とかも必要ありません。基本丸々コピペでできるので、是非お試しあれ！
まとめ
以上、ハミングバードの【吹き出し】でキャラに喋らせる方法でした。
ちょっとした工夫をすれば記事がもっと読みやすくなること間違いなしです。ハミングバードを使っている方はこういう機能もフル活用していきましょう！
The post WPテーマ “ハミングバード” の吹き出しでキャラに喋らせる方法 first appeared on Fukuro Press.
]]>The post WPテーマ “ハミングバード” でショートコードを楽々挿入する方法 first appeared on Fukuro Press.
]]>
ブロガー向けWPテーマで有名な ハミングバード 、
これを使うとアニメ効果のあるブログが簡単に作れて便利です。
でも１つ不便なのが ショートコードの挿入が難しい という所
そのため公式サイトでも AddQuicktagというプラグインを使い、楽に挿入できる方法というのが公開されています。
ただ、その説明はWordPress初心者の方には少し分かりにくいかもしれません。
そこでハミングバードのショートコードを AddQuicktag から追加する方法について、WP初心者でも分かりやすいようにまとめました。３分ほどでできるので是非お試しあれ
ショートコードを追加する手順
その手順は箇条書きすると・・・
- 公式からインポートファイルをダウンロード
- AddQuicktagのインストール
- AddQuicktagにショートコードを追加
・・・こういう手順になってます。その具体的なやり方は次の通り
１．公式からインポートファイルのダウンロード
まずはハミングバード公式の次ページにアクセス（別タブで開きます）
https://open-cage.com/purchase-flow/addquicktag-samplefile/
アクセスしたら「サンプルファイルのダウンロード」を探してください。
そして「AddQuicktag用インポートファイル」というリンクをクリックし、ショートコード追加に必要なファイルをダウンロード（下画像参照）
↓リンクをクリックしてDLすればOK！
リンクをクリックすると "addquicktag.-07-08-2015.json_.zip" というzipファイルがダウンロードされたはずです。（名前は若干違うかも）
そうしたらそれを適当な場所で解凍してください。
解凍したフォルダの中を見ると "addquicktag.-07-08-2015.json" というファイルと "__MACOSX" というフォルダがありますよね？
この内、 "addquicktag.-07-08-2015.json" がこの後の設定で必要になるので、自分の分かる場所に保管しておいてください。
２．AddQuicktagプラグインのインストール
それでは次に AddQuicktag プラグインをインストールしていきます。
その手順は次の通りです。
まずWordPress左メニューから「プラグイン」ー＞「新規追加」をクリック
そうするとプラグイン検索画面が出てくるので、検索欄に "AddQuicktag" と打ってみてください。（空白とか入れないように注意）
そうすると次のプラグインが出てくるので、「今すぐインストール」ボタンを押せばOK
しばらくすると「今すぐインストール」が「有効化」ボタンに変わるので、そのボタンを押して有効化するのもお忘れなく
ちなみに・・・
このプラグインは次記事で紹介したように、クイックタグを追加するためのものです。
クイックタグが何なのか、どういう使い方ができるか知りたい方は上記事もご覧ください。
その説明はここでは省略するとして、これでハミングバードのショートコードを追加する準備が整いました。
３．AddQuicktagにショートコードを追加する
最後にやることは今ダウンロードしたファイルを AddQuicktag にインポートする作業（設定を一括追加すること）です。
そのやり方は次の手順
まずメニューから「設定」ー＞「AddQuicktag」をクリック
そうすると AddQuicktag の編集画面が表示されたはずです。
その画面の下にスクロールして「インポート」という設定エリアを探しましょう。
見つかったら下画像みたいに「ファイルを選択」ボタンをクリック
ファイル選択ダイアログが出てくるので、先ほどダウンロードした
"addquicktag.-07-08-2015.json" という名前のファイルを開いてください。
ファイルを開いたら「ファイルをアップロード・インポート」ボタンをクリック
これでインポート作業はすべて完了
あとは投稿画面から色々なショートコードが追加できるようになります。
投稿画面からショートコードを挿入する方法
今追加したショートコードは投稿画面から次の手順で挿入できます。
まず投稿画面のツールメニューから「Quicktags」と表示されたセレクトボックスを探してみましょう。次画像のオレンジ色で囲ったのがそれです。
そしてそれを押すと登録済みショートコード一覧が出てくるので、後は好きなものをクリックして挿入するだけ
例えば "【ボタン】シンプル" を押した場合、次のようなショートコードが挿入されます。
[btn class="simple"][/btn]もしリンクボタンを作るなら [btn class="simple"] と [/btn] の間にテキストリンクを追加すれば立派なボタンになります。
ボタン以外にも吹き出しとか補足説明ボックスとか色々使用可能・・・これだけでもハミングバードを使う価値はありますね。
ちなみに利用できるショートコード一覧は次の公式ページをチェック
| ショートコードの利用が可能です！実際の見え方が多少異なる場合がございますので、実際の表示はデモサイトのショートコードのページにてご確認ください。 もくじ記事中に関連記事のリンクを画像つきで表示2カラム表示3カラム表示補足... ショートコードの使い方 | OPENCAGE - OPENCAGE |
ただし、今回 AddQuicktag で追加したものは上の全部に対応している訳ではなく、よく使う代表的なショートコードだけです。
なので、もしブログカードなどを貼りたい場合・・・上で紹介されてるショートコードを直書きするか、 Pz-LinkCard などのプラグインを使用するのが良いと思います。
まとめ
以上、ハミングバードでショートコードを楽に使う方法についてでした。
いちいちショートコード直書きは面倒すぎるので、ここで紹介した AddQuicktag を使う方法が最適です。
The post WPテーマ “ハミングバード” でショートコードを楽々挿入する方法 first appeared on Fukuro Press.
]]>The post プラグインやテーマを簡単ダウングレード！WP Rollback の使い方 first appeared on Fukuro Press.
]]>
- テーマを前のものにダウングレードしたい・・・
- プラグインを前のバージョンに戻したいな・・・
こういう風に思うことってありませんか？
テーマやプラグインをアップグレードしたけど前の方が良かった・・・
なんて場合は前のバージョンに戻したくなる時もありますよね。
そんな時に便利なのが WP Rollback というプラグイン
使い方もとても簡単だったので、
これを使って テーマやプラグインを前のバージョンに戻す方法 を紹介していきます。
まず WP Rollback をインストールしよう
まずは、このプラグインをインストール・有効化していきます。
その手順は次の通り
まずメニューから「プラグイン」ー＞「新規追加」をオープン。
そして新規追加画面で「wp rollback」と検索すると検索結果に次のプラグインが表示されるので「今すぐインストール」ボタンを押してインストールしましょう。
ちなみに手動インストールするなら、次ページから直ダウンロードも可。
https://ja.wordpress.org/plugins/wp-rollback/
インストールが終わったら「今すぐインストール」ボタンが「有効化」ボタンに変わるので、
必ずそれを押して有効化してください。
これでテーマ・プラグインのダウングレードができるようになりました。
テーマ・プラグインのダウングレード方法
では次にこのプラグインを使い、
テーマやプラグインをダウングレード(ロールバック)する手順について説明します。
ただしテーマとプラグインではやり方が異なるので、別々に紹介していきます。
テーマをダウングレードする手順
まずはテーマを前のバージョンに戻すダウングレード方法について。
そのやり方は次の通りです。
まずメニューから「外観」ー＞「テーマ」をオープン。
テーマの一覧画面を開いたらダウングレードしたいテーマをクリック。
テーマをクリックすると詳細情報の表示されたダイアログが現れます。
その中に次の画像の矢印で示した「Rollback」と表示されたボタンを探してください。
ちなみにWordPress正式に配布されるテーマでないと Rollback ボタンは表示されません。
残念ながら非公式なテーマはダウングレード不可です。
そしてこの Rollback ボタンを押すと、
次のようなテーマの各バージョンが一覧表示されます。
あとは戻したいバージョンを選択して「Rollback」を押せばダウングレードできます。
ただしダウングレードするとテーマに加えた変更点が全てなかったことになります。
なので必ずバックアップを取ってから、
あるいは子テーマを作ってダウングレードするようにしてください。
ダウングレードの前には次のような最終確認ダイアログが出てくるので、
前のバージョンに戻してもいいと判断したら「Rollback」ボタンを押しましょう。
以上で今のバージョンが削除され、選択したバージョンにダウングレードが完了します。
これがWP Rollback を使ったテーマのダウングレード(ロールバック)方法。
慎重さが必要ですが、やり方は本当に簡単です。
プラグインをダウングレードする手順
お次はプラグインをダウングレードする手順について。
そのやり方は簡単で次に説明する通りです。
まずメニューから「プラグイン」ー＞「インストール済みプラグイン」を開きます。
プラグインの一覧画面を開くと今までなかった「Rollback」というボタンが各プラグインの下に表示されているはずです。
ダウングレードしたいプラグインの Rollback ボタンを押すと次のようなバージョン一覧が表示された画面が現れます。
ちなみにプラグインの場合は各バージョンの更新履歴も確認できます。
そのやり方はバージョン番号にマウスなどをホバーさせ、
「View Changelog」というリンクをクリックするだけです。
すると次のように更新情報が表示されるので、
ダウングレードするときの参考になることでしょう。
では目的したいバージョンが決まったら、
それを選択して「Rollback」ボタンを押してください。
ダウングレードする前に次のような最終確認ダイアログが現れるので、
本当にダウングレードしていいかを確認したら「Rollback」ボタンをクリックです。
しばらくすると現在バージョンが削除され、
そのあと前バージョンがインストールされてダウングレードが完了。
以上がプラグインのダウングレード方法。
プラグインアップデートで挙動がおかしくなったから前バージョンに戻したい・・・
みたいなときに役立つかもしれません。
まとめ - WP Rollback は中々便利
テーマを前バージョンに戻すことは中々ないですが、
プラグインなら使いやすかったなどの理由で戻したくなることは多いと思います。
そんなときに WP Rollback プラグインが役立つはず。
もしダウングレードが必要な方は、このプラグインを活用してみてください。
The post プラグインやテーマを簡単ダウングレード！WP Rollback の使い方 first appeared on Fukuro Press.
]]>The post WPテーマのテストなら Theme Switcha が超便利！その使い方を紹介 first appeared on Fukuro Press.
]]>
WordPressテーマを変更する前にテストしておきたい・・・そんなときに役立つのが「Theme Switcha」というプラグインです。
このプラグインを使えばWordPressにログインしているユーザーでだけテーマが変更でき、既存のテーマには影響を及ぼさないのでテストにぴったりです。
ここではこの Theme Switcha の導入方法・テーマの切り替え手順について解説します。
Theme Switchaの導入
それでは早速プラグインをインストール・有効化して導入してみましょう。
その手順は次の通り
まずメニューから「プラグイン」ー＞「新規追加」をオープン
新規追加画面が開いたらプラグインの検索欄に「theme switcha」と入力
すると検索結果に次のようなプラグインが表示されるので「今すぐインストール」ボタンを押してインストールしましょう。
ちなみに手動インストールする場合は次ページzipでダウンロードすることも可能
https://ja.wordpress.org/plugins/theme-switcha/
インストールが完了したら「今すぐインストール」ボタンが「有効化」ボタンに変わるので必ずそれを押して有効化しておいてください。
これでテーマをテストする環境が整いました。
テーマ切り替え機能を有効にする
このプラグインをインストールしただけではまだテーマのテスト切り替えは行えません。
次の手順でテーマの切り替え機能を有効にしておきましょう。
まずメニューから「設定」ー＞「Theme Switcha」をオープン
これを開くと次の画像のような設定画面が表示されます。
そうしたら次画像のように「Enable theme switching」にチェック
これでログインユーザーのみに対してテーマの切り替えが有効になります。
また次の２つの項目にもチェックを入れておくとテーマテストに便利です。
この２つの項目を有効にするとそれぞれ次の機能が使えるようになります。
- Enable Admin Area
チェックを入れておくとテーマを切り替えした際、投稿ページだけでなく管理画面でも変更が反映される
- Enable Toolbar Menu
チェックを入れておくとログインユーザーに表示されるツールバーにテーマ切り替え用のメニューが追加されるようになる
もしこの２つの機能を使う必要があるならチェックを入れておきましょう。
ここまでの設定をしたら「変更を保存」ボタンを押して設定を保存
これでテーマのテスト機能が全て使えるになりました。
テーマの切り替え方
Theme Switchaを使ってテーマを切り替える方法は次の２つ
- プラグイン画面から切り替え
- 管理ツールバーのメニューから切り替え
この２つのやり方について順に説明します。
プラグイン画面から切り替え
まず１つめの方法はプラグインの設定画面から切り替えるやり方です。
その手順は次の通り
まず先ほどTheme Switchaの設定画面でテーマの切り替えを有効にしましたが、その画面下を見てみてください。
次のように「Available Themes」という項目が新たに追加されているはずです。
この中からテスト切り替えをしたいテーマを選んでクリックしましょう。
クリックすると別タブが開き、次の画像のようにテーマが適用されたブログページがテスト表示されるようになります。
もちろんブログに訪れた読者には元のテーマのままのブログページが表示されているので安心してください。
テーマ変更が適用されるのはログインユーザーのみです。
管理ツールバーのメニューから切り替え
次は設定画面からでなくツールバーから切り替えする方法です。
その手順は次の通り
まずWordPressにログインした状態でブログの適当なページを開いてみてください。
そして上のツールバーから「Theme Switcha」と表示されたメニューが見つかると思うのでそれをクリックします。
メニューを開くと次のように好きなテーマを選択できるので切り替えテストしたいテーマをその中から選びましょう。
選択すると画面が切り替わってテーマは適用されたブログページが表示されます。
以上がTheme Switchaでテーマを切り替えテストする手順です。
もちろんテストテーマはログインユーザーにしか表示されないので読者が見るブログページのデザインが崩れてしまう心配はありません。
まとめ
テーマをいきなり変更するというのはリスクがありすぎるのでテスト環境で試すのは安全策として必要です。
Theme Switcha を使うとテスト環境を手軽に作れて切り替えも自由自在なので是非活用してみてください。
以上、テーマ切り替え用プラグイン Theme Switcha の使い方についてでした。
The post WPテーマのテストなら Theme Switcha が超便利！その使い方を紹介 first appeared on Fukuro Press.
]]>The post simplicityでヘッダータイトルの横にナビメニューを表示する方法 first appeared on Fukuro Press.
]]>
simplicityで ナビメニュー を作成すると、
次のようにタイトルとサイト概要の下にナビメニューが表示されます。
↓ デフォルトのナビメニューの例
このナビメニューをタイトル横やサイト概要横に設置したいと思う人も多いはず
でもsimplicityのカスタマイズ画面ではナビをタイトル横に変える設定はありません。
しかし設定が用意されていないだけで、
CSSを少し改造すれば簡単にナビメニュー位置を変えれるんですよね。
ここでは simplicityでヘッダー横にナビメニューを表示する方法 を解説します。
ナビメニューをヘッダーに設置する利点
ここでは次画像のように、ヘッダー内に設置されたナビメニューを作成します。
ヘッダー内にメニューを埋め込むメリットは次のような点です。
- ヘッダー横の空きスペースを有効活用できる
- ファーストビューで記事に目が行きやすくなる
- デフォルトで表示されるナビメニューより目立つ
- デザイン的にもオシャレになる
ヘッダーにナビメニューを埋め込むことで今までナビメニューにとられていたスペースがなくなる上に、ヘッダー横のスペースも活用できて一石二鳥です。
あとオシャレな感じのメニューも作れるので、デザイン面でもプラスになります。
ヘッダー横にナビメニュー表示させる方法
ではヘッダーにナビメニューを表示させる手順を解説します。
その手順は次の通り…
header.phpの編集
まずsimplicityでヘッダー出力している「header.php」というPHPファイルを編集します。
そのためには、メニューから「外観」ー＞「テーマの編集」をオープン。
テーマ編集画面を開いたら「header.php」というファイルを探して開き、
その中で次のようにヘッダーロゴ表示を行っている部分を見つけてください。
上の画像でオレンジ色で囲った部分がそうです。
この部分を 次のように改造 すればOK。
<!-- ここから追加 -->
<div id="header_navi">
<!-- ここまで -->>
<div class="alignleft top-title-catchphrase">
<?php get_template_part('header-logo');?>
</div>
<!-- ここから追加 -->
<ul>
<li><a href="xxx">WordPress</a></li>
<li><a href="xxx">プラグイン</a></li>
<li><a href="xxx">javascript</a></li>
<li><a href="xxx">CSS<a></li>
<li><a href="xxx">SEO</a></li>
</ul>
</div>
<!-- ここまで -->「<!-- ここから追加 -->」から「<!-- ここまで -->」の部分をヘッダーロゴ出力の部分に追加してください。
そして追加したコードで、ナビメニュー の代わりになるのが次のリストです。
<ul>
<li><a href="xxx">WordPress</a></li>
<li><a href="xxx">プラグイン</a></li>
<li><a href="xxx">javascript</a></li>
<li><a href="xxx">CSS<a></li>
<li><a href="xxx">SEO</a></li>
</ul>URLやリンクテキストなどは自分のサイトに合ったものに書き換えてください。
編集が終わったら「ファイルを更新」ボタンを押して更新完了です。
style.cssの編集
次にテーマの編集画面から「style.css」というCSSファイルを開いてください。
そしてそのCSSファイルの最後に 次のような内容 を追加します。
/** ヘッダーにナビメニューを追加 **/
@media screen and (max-width: 1110px){
#navi{
display: block;
}
#header_navi ul{
display: none;
}
}
@media screen and (min-width: 1110px){
#navi{
display: none;
}
#header_navi{
display: flex;
}
#header_navi:first-child{
flex: 1;
}
#header_navi ul{
flex: 1;
flex-wrap: wrap;
display: flex;
margin: auto 0px;
padding-right: 100px;
list-style-type: none;
}
#header_navi ul li{
width: calc(20% - 1px);
text-align: center;
}
#header_navi ul li {
border-left: 1px solid gray;
}
#header_navi ul li:first-child{
border-left: 1px solid transparent;
}
#header_navi ul li a{
text-decoration: none;
}
}この内容を追加したら「ファイルを更新」を押して更新。
ファイル更新してページを見てみると、
次のようにヘッダーにナビメニューが表示されましたよね？
ここではCSSを使って、
- 画面幅1110px以上でナビメニューを表示
- 画面幅1110px未満でナビメニューを隠す
・・・としているので、スマホではナビメニューはヘッダーに表示されず、プルダウン式のメニューが代わりに表示されるようになります。
ナビメニューのカスタマイズ
最後にここで設置したナビメニューのカスタマイズ方法について少し紹介します。
カスタマイズするには次のようにstyle.cssを編集してください。
メニューの列数
メニューの列数はstyle.cssで追加したCSSコードの次の部分で調整しています。
#header_navi ul li{
width: calc(20% - 1px);
text-align: center;
}
widthプロパティに「calc(20% - 1px)」を指定することでメニューアイテム１つの幅はメニュー横幅全体の20%分から1ピクセルを引いた幅になります。
１アイテム当たり全体の20%の大きさを持つので次のように５列で表示されています。
もしこの列数を変えたい場合は「calc((100% / 列数) - 1px)」と指定してください。
例えば６列に変えたい場合は次のようにwidthプロパティを書き換えます。
width: calc((100% / 6) - 1px);これで次のように６列のナビメニューになります。
また指定した列数を超えた場合は自動で折り返されるので見切れるという心配はありません。
文字サイズや色の変更
ナビメニューの文字の装飾を行っているのはstyle.cssに追加した次の部分です。
#header_navi ul li a{
text-decoration: none;
}
なので例えばメニュー内の文字を太字にしてフォントカラーを緑色にしたいならこの部分にスタイルを追加します。
#header_navi ul li a{
text-decoration: none;
font-weight: bold;
color: green;
}
変更したナビメニューは次のような見た目になります。
まとめ
simplicityではカスタマイズ画面にナビメニューの位置を変更する設定はありません。
しかし、ここで解説したようにテーマファイルを少しだけ改造するだけでヘッダー内にナビを表示することが可能です。
ここでは最低限のデザインしか紹介しなかったのでフォントサイズや色、列数などをサイトに合わせるとより洗練された綺麗なナビメニューが作れることでしょう。
以上ここではナビメニューをヘッダー横に表示する方法について解説しました。
The post simplicityでヘッダータイトルの横にナビメニューを表示する方法 first appeared on Fukuro Press.
]]>The post simplicityでSNSボタンの種類や位置を自在にカスタマイズする方法 first appeared on Fukuro Press.
]]>
WordPressテーマのsimplicityにはSNSボタン表示機能がついてます。
Twitter、Facebook、ハテブ、etc...などのSNSの拡散力は無視できないし、シェアされることで記事がバズることもあります。
なので標準でSNSボタン表示できるsimplicityはブロガーに強力なテーマです。
でもSNSボタンをカスタマイズできないのが欠点
自由な場所に表示したり、あるSNSボタンだけ非表示にすることはできません。
そこで simplicityのSNSボタンを自由にカスタマイズする方法 を解説！
simplicityのSNSボタンはカスタマイズしにくい
simplicityでSNSボタンをカスタマイズするには、
「外観」ー＞「カスタマイズ」と進み、カスタマイズ画面で「SNS」を選びます。
カスタマイズできるのは次のような項目。
- シェアボタンの表示・非表示
- シェア数の表示
- ボタンのタイプ
- シェアボタンの表示位置(タイトル下か本文下のみ)
- 表示するシェアボタンの種類
- その他いろいろ・・・
これだけ設定できれば十分というような気もしますが、結構制約もあります。
例えばシェアボタンをタイトル下に表示した場合、次のようなボタンが表示されます。
これでも悪くはないですが好きなデザインは選べず、
本文下に表示されるような 大きめのボタン にすることもできません。
あとタイトル下では "ツイートボタンを隠したいな" と思って、
からチェックを外すと、本文下のツイートボタンまで非表示になってしまいます。
このように標準だと表示できる位置はタイトル上と本文下の２か所のみ。
あるボタンを非表示にすると、２か所ともボタン非表示になってしまいます。
そこで位置・種類をカスタマイズするにはPHPから操作する必要があります。
といっても難しいコードではなく、
プラグインを使えば危険なことせず、安全にボタンのカスタマイズができます。
次はその方法について解説していきます。
SNSボタンのカスタマイズに必要なもの
まずSNSボタンをPHPからカスタマイズするには・・・
ウィジェット内にPHPを書ける PHP Code Widget プラグインをインストール。
「プラグイン」ー＞「新規追加」からプラグイン名で検索すると次のように出てきます。
ちなみに直ダウンロードして使うなら、次URLからダウンロードも可。
https://ja.wordpress.org/plugins/php-code-widget/
インストールして有効化すると「外観」ー＞「ウィジェット」に「PHPコード」というウィジェットが表示されるので、それを表示したい位置にドラッグ＆ドロップできます。
以下の画像はPHPコードの設置例です。
タイトル欄の下にPHPコードを書き、
「保存」を押すとPHPコードを埋め込んだ領域でそのPHPが実行されます。
PHPファイルを直接編集してる訳ではないので、
エラーが起きてもブログ全体が壊れることは無いので安全です。
以下の方法では、SNSボタンをカスタマイズするのにこのプラグインを使います。
SNSボタンのカスタマイズ
前置きが長くなりましたが、次がSNSボタンのカスタマイズ方法です。
位置のカスタマイズ方法から最初に見てください。
１．ボタン位置のカスタマイズ
まずSNSボタンがどのように設置されているかという事ですが、
次のようにget_template_part関数からSNSボタンのテンプレートを呼び出してます。
<?php
get_template_part('template');
?>このように書くとtemplate.phpというPHPファイルの内容が出力されます。
なのでSNSボタンを出力したいなら simplicity のテーマフォルダの中からSNSボタンの出力をしているテンプレートファイルを呼び出し、そのファイル名をget_template_partに渡せばいいという事です。
simplicity2のテンプレートフォルダは以下のURL
URL : [WPインストールディレクトリ]/wp_content/themes/simplicity2
ここには、SNSボタン出力する３つのテンプレートが存在します。
- sns-buttons.php
- sns-buttons-default.php
- sns-buttons-ballooon.php
このいずれかを get_template_part関数 に渡せばSNSボタン表示されます。
例えばウィジェット画面で「投稿本文上」にPHPコードウィジェットを設置し、
次のようなPHPコードを書きます。
<?php
get_template_part('sns-buttons');
?>
そして保存すると記事タイトル下に次のようにSNSボタンが設置されます。
標準のカスタマイズ画面のような平たいボタンではなく、大きめのアイコンになりました。
またget_template_partに 'sns-buttons-balloon' を渡すと、
次のような バルーンボタン が表示されます。
ここではタイトル下に表示していますが、
PHPコードウィジェットが置けるなら、どこにでもSNSボタンを設置可能です。
２．表示するSNS種類のカスタマイズ
標準でもどのボタンを表示するかはカスタマイズできますが、
あるボタンを非表示にすると、全て場所でそのボタンが非表示になってしまいます。
それぞれのSNSボタンの表示・非表示は、
simplicityで定義されている次のようなPHP変数で切り替えされています。
| 変数名 | SNSの種類 |
|---|---|
| twitter_btn_visible | |
| facebook_btn_visible | |
| google_plus_btn_visible | Google+ |
| hatena_btn_visible | ハテブ |
| pocket_btn_visible | |
| line_btn_visible | LINE |
これらの変数がtrueの時に表示され、failseの時に非表示になります。
例えば ツイートボタン と GooglePlusボタン を非表示にしたい場合・・・
PHPコードに次のように書きます。
<?php
/** ツイートボタンを非表示 */
set_theme_mod( 'twitter_btn_visible', false );
/** GooglePlusボタンを非表示 */
set_theme_mod( 'google_plus_btn_visible', false );
get_template_part('sns-buttons');
/** 設定を元に戻す */
set_theme_mod( 'twitter_btn_visible', true );
set_theme_mod( 'google_plus_btn_visible', true );
?>テーマで定義されている変数を変更するには set_theme_mod関数 を使い、
この関数の１つめの引数に 変数名 、２つめに 値 を渡します。
この例ではtwitter_btn_visible変数とgoogle_plus_btn_visible変数にそれぞれfalse(偽)の値を渡しています。（ ＝ ボタン非表示 ）
このPHPコードを保存すると、
次のようにツイートボタンとGooglePlusボタン以外が表示されるようになります。
カスタマイズ画面でボタン非表示にする場合と違い、
記事タイトル下にあるSNSボタンだけカスタマイズ可能ということです。
３．SNSボタン上のメッセージ変更
SNSボタンの上に「シェアする」が表示されますが、これもカスタマイズ可能。
このメッセージを表示しているのが share_message_label という変数です。
これを次のように set_theme_mod関数 で変えるだけで任意のメッセージになります。
<?php
set_theme_mod('share_message_label', "この記事をシェア！");
get_template_part('sns-buttons');
/** メッセージを元に戻す */
set_theme_mod('share_message_label', "シェアする");
?>
このPHPコードを保存すると・・・
上画像のように「この記事をシェア！」というメッセージが表示されるようになります。
SNSボタンのメッセージを一工夫すれば、シェア率アップにつながるかも。
まとめ
simplicityは初めからSNSシェアボタンがついてて便利です。
でも位置やデザインまで細かく設定できないのが不便ですね。
SNSボタンを自由にカスタマイズしたい場合、今解説した方法をお試しあれ。
The post simplicityでSNSボタンの種類や位置を自在にカスタマイズする方法 first appeared on Fukuro Press.
]]>The post WordPress子テーマを面倒なことせず１分で作成する方法 first appeared on Fukuro Press.
]]>
WordPressでテーマをカスタマイズする場合、子テーマを作ることが多いです。元のテーマを直接編集することはあまりありません。
でも自分で子テーマを作成するのは中々大変。専用のファイルとかフォルダを作ったり、ファイルを編集したりで慣れない人にとっては中々きつい作業なんですよね。
そこでおススメしたいのが Child Theme Configurator というプラグイン
ここではこれを使って子テーマを簡単に作成する方法についてまとめました。
そもそも子テーマとは？作成するメリット
まず子テーマとは一体何なのか・・・という話について少し解説
WordPressにおけるテーマは機能やデザインをカスタマイズするためのもの（つまりブログのひな形的な存在）です。
そしてさらに独自のデザインや機能を追加する場合、テーマファイルやCSSファイルを編集することでより自分好みにカスタマイズ可能です。
しかしテーマを直接編集した場合、次のようなデメリットがあります。
- テーマのアップデートがあると上書きされる
- テーマがアップデートされると今までの変更も全て消される
特に公式で配布されているテーマなどを使っている場合、テーマが勝手にアップデートされ今までの変更が全て消去されるなんてことも・・・
そのような悲劇を防ぐために使われるのがテーマの分身である「子テーマ」です。
子テーマを使うメリットは何かというと次のような点
- テーマがアップデートされても影響を受けない
- 親テーマを変更せず残しておける
アップデートには影響を受けないのでずっとカスタマイズしたデザインを使い続けることが可能になります。
でも子テーマを普通に作ろうとすると専用のフォルダやファイルを作らなくてはならないので手間と時間がかかるのが少し欠点
そこでその手間と時間を削減するのに Child Theme Configurator プラグインの出番です。
Child Theme Configuratorの導入
これはファイルやフォルダ作成することなく簡単操作で子テーマ作成できる便利なプラグインです。その導入手順は次の通り
まずメニューから「プラグイン」ー＞「新規追加」と進み、プラグイン検索欄に「child theme」と入力して検索
しばらくすると検索結果にプラグインが表示されるので「今すぐインストール」を押してインストールしてください。
ちなみに手動インストールする場合は次ページから直接ダウンロードも可
Child Theme Configuratorプラグインページ
インストールしたら「有効化」ボタンを押して有効化するのも忘れずに。これで子テーマ作成の準備が整いました。
子テーマの作成手順
次はこのプラグインを使って実際に子テーマを作成してみましょう。次の手順を試せば数分もかからないと思います。
まずメニューから「ツール」ー＞「Child Themes」を選択
すると次のような Child Themes のプラグイン画面が表示されます。
最初は「Parent/Child」タブが開かれていると思うので、この画面内で次の手順で子テーマを作っていきましょう。
１．テーマの解析
最初にテーマが子テーマ作成に対応しているかどうかを調べます。
まずは「CREATE a new Child Theme」にチェックが付いているか確認してください。
そして「Select a Parent Theme」で子テーマを作りたいテーマを選び(①)、選んだテーマ名の下にある「Analyze」ボタンを押して(②)ください。
解析が始まるので待つと下の方に解析結果が表示され、その中に「This theme appears OK to use as a Child theme.」というメッセージがあれば子テーマを作成できます。
解析が完了すると下の方に子テーマの設定項目が表示されます。
２．子テーマフォルダに名前をつける
次に子テーマのフォルダの名前を「Name the new theme directory:」から入力します。
デフォルトでは「テーマ名-child」のような形式の名前になっているので、もし必要があれば分かりやすい名前に変えてください。
ただしこれは子テーマのフォルダ名であって子テーマそのものの名前ではありません。子テーマの名前をつける設定は別にあります。
３．スタイルを保存する場所を選ぶ
テーマはサイトデザインをstyle.cssというファイルで管理しています。
そのstyle.cssをどこに保存するかを「Select where to save new styles:」でチェックして選びます。
ここは「Primary Stylesheet(style.css)」をチェックしたままで問題ありません。
４．子テーマに名前をつける
次に作成する子テーマに名前をつけます。
「Show/Hide Child Theme Attributes」ボタンをクリックするとテーマ情報を編集するフォームが出てくるのでその中の「Child Theme Name」で子テーマの名前を変更できます。
先ほど子テーマのフォルダに名前をつけましたが、ここでつける子テーマの名前がWordPressのテーマ管理画面などに表示される名前です。
５．子テーマの作成
ある程度子テーマの設定が終わったら「Create New Child Theme」ボタンを押すと子テーマが作成されます。
以上で子テーマ作成は完了です。お疲れ様でした。
作成した子テーマの有効化
子テーマを作成しただけでは親テーマが有効化されたままなので、次の手順で子テーマを有効化します。
まずメニューから「外観」ー＞「テーマ」を選択
開くとインストールされているテーマ一覧が開くので、その中から作成した子テーマを選んで「有効化」ボタンを押してください。
これで子テーマがWordPressに適用されます。
子テーマのカスタマイズ
子テーマをカスタマイズするにはメニューから「外観」ー＞「テーマの編集」を選びます
するとテーマの編集画面が開き、現在適用している子テーマのスタイルや関数を編集できます。
ただ上の画像のように子テーマ内には「style.css」と「functions.php」の２種類のファイルしかなくテンプレートなどはカスタマイズできません。
なのでもしテンプレートなどをカスタマイズしたい場合は次の手順で子テーマに親テーマのファイルをコピーしてくる必要があります。
まずメニューから「ツール」ー＞「Child Themes」を開きます。
そしてプラグインのツール画面で「Files」タブを選択してください。下の画像のオレンジ色の枠で囲った部分です。
すると子テーマにコピーしたいテンプレートファイルがずらずらと表示されるので子テーマにコピーしたいテンプレートファイルにチェックをつけてください。
そしてその下にある「Copy Selected to Child Theme」ボタンを押すと子テーマに選択したテンプレートファイルがコピーされます。
実際に「header.php」と「footer.php」にチェックを入れてコピーした後にテーマの編集画面を見るとテンプレートが追加されていることが分かります。
ちなみにですが子テーマにコピーされたテンプレートは親テーマのテンプレートよりも優先的に使われます。
まとめ
以上、子テーマ作成が簡単にできる Child Theme Configurator の紹介でした。
余計な作業をしなくて済み、時間も節約できるのでおススメです。子テーマを作ってカスタマイズしたいという人は是非使ってみてください。
The post WordPress子テーマを面倒なことせず１分で作成する方法 first appeared on Fukuro Press.
]]>The post WordPressテーマって何？インストール方法を解説！【初心者向け】 first appeared on Fukuro Press.
]]>
WordPressではサイトのカスタマイズのために「テーマ」が使われます。
本来サイトの全ページで共通のヘッダーやフッターを作ったり、デザインを統一するにはPHPなどのスクリプト言語の知識が必要ですが、テーマを使うとその知識なしにサイトのデザインを統一することが可能です。
また一部のテーマではサイトデザインだけでなくSNSボタンなどの便利なウィジェットも用意されています。
ここではWordPress初心者の方のためにテーマとは何かという事とテーマをインストールしてサイトで有効化する方法について解説します。
テーマの役割
テーマのインストール方法を紹介する前にテーマがWordPressでどのような役割を持つのか説明します。
まずテーマの一番の役割はヘッダー・フッターやサイドバーなどのサイトデザインを統一して、見栄えを良くしサイトの構成を分かりやすくするためのものです。
例えばsimplicityというテーマでは次のようにどのページでも上部にヘッダー、記事の右側にはサイドバーが表示されます。
もし自力でサイトを作る場合はPHPなどのプログラミング言語を使ってテンプレートを作り、デザインなども自分でCSSを作らなくてはならないので記事を書くまでにとてもつもなく労力がかかります。
しかしテーマを使えばただWordPressにインストールするだけで全ページ共通で同じデザイン・機能が使えるので余計な手間がかからず、すぐに本格的な見た目のサイトを作ることが可能になります。
またテーマによってはサイトデザインを統一する以外にも次のような役割もあります。
- SNSボタンなどの便利なウィジェットを表示する
- サイトの構成を検索エンジンに分かりやすく伝える
- サイトをスマホ・PCの両方にレスポンシブ対応させる
- ある分野(ビジネスなど)に特化したサイトを作る
- ナビメニューやフッターメニューを表示する
サイトの機能をよりパワーアップさせるこのような機能を持つテーマもあり、WordPressでサイトやブログを構築するときにテーマは欠かせないものです。
テーマのインストール方法
テーマをWordPressサイトで使う方法には大きく分けて次の２つあります。
- WordPress内でテーマをインストールして有効化
- ダウンロードしたテーマをアップロードして有効化
この２つの方法について順に解説します。
WordPressn内でインストールして使う方法
テーマを使う一般的な方法はWordPress内でテーマをインストールしてサイトで有効化する方法で、手順は次の通りです。
まずメニューから「外観」ー＞「テーマ」を選びます。
すると現在インストールされているテーマ一覧が出てくるので、新しいテーマを探してインストールするために「新規追加」ボタンを押します。
すると検索画面が出てくるのでテーマの検索欄に検索したいテーマ名を入力し(①)、インストールしたいテーマの「インストール」ボタンを押してください(②)。
インストールが完了したら次のようにインストールしたテーマに「有効化」ボタンが表示されるのでそれを押して有効化します。
有効化が完了すると次のようにインストールしたテーマの下に「有効」と表示され、サイトの全てのページにインストールしたテーマが適用されます。
もしインストールしたテーマをカスタマイズするには「カスタマイズ」ボタンを押すか、メニューから「外観」ー＞「カスタマイズ」と進むと今有効になっているテーマのカスタマイズができるようになります。
ダウンロードして使う方法
次はWordPress内ではなく外部サイトで配布されているテーマをダウンロードしてきてサイトで有効化する方法を紹介します。
ここではダウンロードして使うテーマの例として「simplicity」を使っていますが、テーマのダウンロード以降はどのテーマでも同じ手順です。
まずsimplicityの公式サイトから「ダウンロード」ボタンを押してテーマのzipファイルをダウンロードします。ここは各テーマによってダウンロードの手順は違うのでテーマを配布しているサイトの説明をよく読んでください。
ダウンロードするとsimplicityのZipファイルがダウンロードフォルダに保存されます。ダウンロードして使うテーマはこのようにZipという圧縮ファイルの形式で配布されています。
次にWordPressのメニューから「外観」ー＞「テーマ」を選びます。
そしてテーマ一覧が出てくるのでインストールの時と同じように「新規追加」ボタンを押してください。
そして次にテーマの新規追加画面の上の方にある「テーマのアップロード」ボタンを押します。
するとテーマのアップロード画面が出てくるので「ファイルを選択」ボタンを押し、出てきたファイル選択ダイアログで先ほどダウンロードしてきたテーマのZipファイルをアップロードしてください。
アップロードすると「ファイルを選択」ボタンの横にアップロードしたZipファイル名が表示されます。そのZipファイルで間違いなければ下の方にある「今すぐインストール」ボタンを押してインストールしてください。
しばらくするとインストールが完了して次のような画面になるので「有効化」と書かれたリンクをクリックしてテーマを有効化しましょう。
有効化が完了するとテーマ一覧画面に戻り、今有効化したテーマに「有効」と表示されます。
もしインストールしたテーマをカスタマイズするには「カスタマイズ」ボタンを押すか、メニューから「外観」ー＞「カスタマイズ」と進むと今有効になっているテーマのカスタマイズができるようになります。
以上がWordPressでテーマをインストールする２つの方法の手順です。
まとめ
WordPressのテーマはブログやサイトを構築するのに欠かせないものです。
ここでは次の２つの方法でテーマをサイトで有効化する方法を紹介しました。
- WordPress内でインストールして使う方法
- 外部サイトからダウンロードして使う方法
テーマによってはWordPress内でインストールできずダウンロードしてインストールしなくてはならないテーマもあるので両方のやり方はマスターしておきましょう。
またWordPressではテーマの他に「プラグイン」というものを使うことで機能やデザインを拡張することもできます。
そのインストール方法については次の記事でも紹介してあるので、テーマの使い方が分かったらプラグインも活用してみてください。
最後に・・・
テーマはサイト全体のデザインや機能を決める大事なものです。適当に決めないでどのテーマが自分のサイトに適しているかよく確かめてから決めましょう。
以上ここではテーマをインストールして有効化する方法について解説しました。
The post WordPressテーマって何？インストール方法を解説！【初心者向け】 first appeared on Fukuro Press.
]]>