【WordPress】ブログの金字塔『ワードプレス』活用術をご紹介！プラグインと応用技
ドーモ！WordPressの鬼、ぬま畑でございます！
今日はWordPress活用術というテーマで話していこうと思います。
当記事は既にブログをWordPressで運用してる人で『こういうことしたいのにどうやれば良いんだろう…？』みたいな初心者や中級者一歩手前くらいの人向けの記事になっており、前回はWordPressテーマとプラグイン中心でお話しました。
今回は2回目(後半)となります、当記事をご覧頂く前に、前回(前半)を見て頂いた方が活用術として参考になるので前回と合わせてご覧ください。
↓↓↓↓↓
【WordPress】ブログの金字塔『ワードプレス』活用術をご紹介！テーマとプラグインについて
今回は前回の続きとして少しだけテンプレートを紹介、プラグインを使用したお問い合わせフォームの設置、WordPress運用でこれだけはやっておくといいこと、前回紹介した切り取った画像を記事に貼り付ける技の更に応用編てな感じでいきます。
では早速行きましょう！
WordPressプラグイン
まずはプラグインから紹介します。
TinyMCE テンプレート
記事のテンプレートを作成できるプラグインですね。
これが結構便利でして、ある程度ブログを運営していると(記事を書いていくと)その記事の構成として『型』が決まってきます。
その型をいちいち作成していたら時間もかかりますし大変です、なのでこのプラグインを使用すればある程度の型(テンプレート)を用意できるので大変便利です。
勿論複数用意できるので様々なテンプレを保存しておき、その都度呼び出すことが可能です。
プラグインを有効化するとWordPress内左メニューに[テンプレート]の項目が追加され、クリックorタップすると見た目は記事作成画面と一緒で扱いやすいものとなっています。
呼び出す時は記事のメニュー上部にある[テンプレートを挿入]から。
※公式のプラグインではないので下記からDLしてください。
Contact Form 7
お問い合わせフォームを設置するためのプラグインですね。
これについては後ほど。
Flamingo
お問い合わせで受け取った内容の詳細な情報を確認できるプラグインですね。
お問い合わせをブログに設置したい
ブログ運営にしろサイト運営にしろ、運用していく中でお客様(訪問者)とのやり取りは必然というか必須ですよね？
そんな時は上記で紹介したプラグイン【Contact Form 7】を導入・有効化することで簡単にお問合せフォームを設置することが可能です。
簡易的ではありますが、（PCでの）やり方の手順として…
プラグインを横のメニューからプラグインを選択。（そんなのない！って人はメニューが閉じてるかもしれません、一番下の
を開けてみてください。）
新規追加を押します。
プラグインの検索…と記載されているフォームに
【Contact Form 7】と入力。
一覧にContact Form 7のプラグインが表示されますので【今すぐインストール】を押します。インストールが終わったら有効化してください。
WordPressの左メニュー内にお問い合わせという項目が出てきたと思います。
※出てこない方はブラウザを立ち上げ直してみてください。
初期の状態でコンタクトフォーム1というものが既に作成されています、要はサンプルですね。
クリックして中を見てみるとこういう感じ。
上部の青い部分のコードを貼り付けると…
↓↓↓↓↓
実際にお問い合わせフォームを簡単に設置することが可能です。
【名前、メールアドレス、題名、本文、送信ボタン】となっていますが、ドロップダウンやラジオボタン、チェックボックス等も設置できたりするのでかなり幅広く活用することが可能です。
WordPressにお問い合わせを設置したい場合はこのプラグインが必須級なので是非とも覚えておきたいですね。
お問い合わせに画像などのファイルを添付出来るようにしたい。
ContactForm7は大変便利で、様々な項目の設定が可能なので色々と応用が可能です。
ブログを運営している場合はあまり必須ではないと思いますが、企業サイトやHPをWordPressで運用している場合はファイルの受け取りをしたい場合があります。
例えば求人をサイトで出して、履歴書をPDFファイルで受け取ることや何かしらの書類を写真で撮ってその画像データ(PNGやJPG)を送ってもらったり。
用途としては様々です。
その場合ContactForm7に機能としてファイル添付が出来る機能があるのですが、ファイルを受け取るために少しだけ設定をいじらなければなりません。
ちょっと時間がなくて詳細は後日書いていきます。
これだけはやっておく方が良いこと
ブログやサイトを運営していくと画像データがとんでもない量になっていきます。
当ブログの画像データは今現在6,560枚もの画像がデータベースに保存されていますΣ(ﾟДﾟ)
で、それが『凄いでしょ！！』と言いたいのではなく、この過去の画像もう一度使用したいって場面があります。
別にもう一度選べばいいじゃんって話なんですが、100や200ならそれも可能ですが流石に1000や2000、ましてや6000の中から探していくとなると結構な労力が必要となります。
で、やっておく方が良いこととして画像には『分かりやすい名前を付けておく』+『ローマ字や英語も付ける』って感じ。
これ結構大事で、例えばこの画像。
画像の名前は『この邪気はkonojyaki』という名称にしています。
こうしておくと、あの画像使用したい！ってなった時に検索で『この邪気は』もしくは『konojyaki』のどちらも検索でヒットするので「名称+ローマ字(英語)」で名前を付けるってのはやっておくと後々楽に作業できますよ。
更に応用編
画像に関して、前回紹介した【Windowキー＋Shiftキー＋Sキー】で範囲スクリーンショットしてWordPress記事に貼り付けをしたらそのまま表示されるというプラグイン『OnePress Image Elevator』を紹介しましたが、これ一つだけネックがありまして…例えばここをスクショして見ましょう。
↑↑↑↑↑
こういう感じで貼り付けられるのは大変便利なのですが、なんか画像と背景の境界線がなく、わかりにくいですよね？
画像と背景の境界線、つまり枠が欲しいと思いませんか？
要するにこうしたいということ。
↓↓↓↓↓
わかりますかね？
画像に『枠』を付けるって言うことです。
こうすることで境界線が出来て画像と背景が切り分けられ、わかり易い表現となりました！
上記はWordPressだけではないのですが、CSSを使った応用技です。
HTMLのマークアップ言語やCSSのスタイルシート言語を一切触ったことがない人は難しいと感じるかもですが、そんなことは一切なく、ちゃんと手順を踏んでいけば問題なくできるので是非ともやっていただきたいちょっとした技です。
※今回は例としてCocoonテーマでお伝えします、コードを追記するのですが子テーマで編集するのでテーマ/子テーマの概念がわからない場合はGoogle等で検索してください。
WordPress左メニューの『外観』→『テーマエディター(テーマを編集)』→『テーマファイルの中にStylesheet(style.css)』で編集画面を開きます。
その項目の中に
上記の部分を見つけて
img.waku
{
border: solid 1px #808080;
box-shadow: 0px 0px 5px #808080;
}
上記を記述します。
最後は必ず下の方にある『保存』を押してください。
これだけでは何も起こりません。
実際にこの画像の枠線を付けたい場合は…
画像を選んで…
画像を貼り付け鉛筆マークの編集ボタンをクリックします。
左下の上級者設定に注目
(ひょっとしたら非表示になっているかも知れませんので▼をクリックして開けてください)
画像CSSクラスに
先程『waku』と設定したので画像CSSクラスの入力フォームに[waku]と入力します。
こういう感じで枠が付けられるので境界線が出来、わかりやすく表現できます。
いかがでしたでしょうか？
WordPressをイジっていくと結構壁にぶちあたったりしますが、Google等で検索すると有志が『こうすればいいよ！』って詳細にわかりやすく説明してくれているものが大量に出てきます。
なので困ることってのは少なくなりました…本当にいい時代になったなぁと(笑)
それでは、最後までお読み頂きありがとうございましたﾉｼ
[Twitter]
ツイッターもやってるんでよろしければフォローお願いしますm(_ _)m
↓↓↓↓↓
[stand.fm]
またstandFMもやっているので興味ある方はどうぞ！
↓↓↓↓↓
【ぬまたのラジオチャンネル(仮称)】(stand.fm)
この記事が良いと思ったら下記Like(いいね)ボタン押して頂けると管理人の励みになります！
↓↓↓↓↓
コメント