WordPressの本体の更新やプラグインの更新をした際に、稀に不具合が発生する場合があります。
今回はそのうちの一つ「記事の投稿・編集画面が正常に表示されなくなったとき」の対処方法を記載します。

「記事の投稿・編集画面が正常に表示されない」とはどんな状態か？

先日、WordPressの更新とプラグインの更新を行った際に、記事の投稿・編集画面で下記のような現象に遭遇しました。

WordPressの記事の投稿・編集を頻繁に行っている人なら「あれ？おかしいな？」と気づくと思います。
ちなみに、正常な画面は下記の画面になります。

比べてみると一目瞭然ですね！
記事を入力するテキストエリアにメニューがなかったり、そもそも記事を公開するボタンがなかったりと、いろいろな要素が足りていません！
この画面になってしまうと、テキストを打ち込んでも表示されませんし、画面右上にある「表示オプション」や「ヘルプ」の開閉式メニューも無反応になってしまいます。

今回の事例に関しては「Native Emoji」のプラグインの設定を変えることで不具合を解消しました！

お客様が使用しているプラグインの中に「Native Emoji」という記事に絵文字を簡単に入力できるプラグインが導入されていました。
こちらのプラグインを停止にしたところ、記事が表示されるようになりました。
原因を調査したところ、下記の記事を発見しました。
参考URL：絵文字プラグイン「Native Emoji」が使えない！

記事に書かれている現象とは違いますが、何やら設定が必要とのこと。
プラグインを導入した際に設定をした覚えがなかったため、設定画面を確認してみると…「Admin editor」にチェックが入っていませんでした！

「Admin editor」にチェックを入れて画面下部の「変更を保存」ボタンを押してプラグインの再設定をしたところ、記事の投稿・編集画面が正常に表示されるようになりました！

今回の事例に関しては、上記のプラグインの設定変更のみで不具合が解消しました。

不具合が発生した際には「何が原因なのか？」を追求することが大事です

不具合が発生した際に、まず初めにすべきことは「何をして不具合が発生したのか？」を把握することにあると思います。

今回の事例に関しては、下記のようなヒントがありました。
・WordPressを更新してから不具合が発生した？
・プラグインを更新してから不具合が発生した？
・記事の投稿と編集の画面のみで不具合が発生している。

ここから考えられる問題は…
・WordPressの最新版にバグがある
・WordPressの最新版と相性の悪いプラグインがある
・プラグインに何かしらのバグがある
この辺りが問題として考えられます。

今回の事例に関しては、記事の投稿と編集の画面のみで不具合が発生したため、投稿記事の補助系のプラグインが怪しいことになります。
そのため、投稿記事の補助系のプラグインを一つ一つ停止して確認をしてみたところ、原因がプラグインにあることを突き止めました。

もし問題の箇所が分からない場合は、下記を順に試してみてください。
・パーマリンクの再設定（デフォルトの設定に切り替えて更新した後に、元の設定に切り替えて更新）をして不具合が改善するかどうかを確認
・プラグインを全停止して不具合が改善するかどうかを確認して、改善するようであればプラグインを一つ一つ停止して原因のプラグインを突き止める
上記でも不具合の原因がわからない場合は…専門家に尋ねましょう！

このようにして、何か不具合が発生した際には様々なヒントから調査範囲を絞ることが大切になります。

システムやプログラムに関して知識がないうちは「なんか知らないけど出来た！」で済ませることは多いと思いますが、更に踏み込んで「何故こんなことになったのか？」を理解することで、システムやプログラムに関する理解を深めていきましょう！

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

久々にWordPressの操作をした気がします、網干です。

「WordPressをたまにしか触らないユーザーは、カスタマイズ権限を剥奪してしまえ！」
という天の声を拝聴する夢を見たので、今回はユーザーの権限ごとにメニュー項目を制御（表示・非表示を切り替え）するプラグイン「Adminimize」をご紹介いたします。

私のようなWordPressから距離を置いたユーザーはメニュー項目を限定してしまいましょう！横暴だー！

今回の記事を読むことで、ユーザーのメニューを下図のように制限することができます。

参考にさせて頂いた記事は下記の記事になります。
WordPressを複数人で更新するときに必ず入れておきたいプラグイン5選

「Adminimize」プラグインのインストールと有効化

WordPressの管理画面から「プラグイン」→「新規追加」で「Adminimize」プラグインを検索します。
プラグインが表示されますので「今すぐインストール」ボタンを押します。

インストールが完了するとボタンが「有効化」に変化しますので、有効化ボタンを押します。

有効化ボタンを押して数秒すると、プラグインの一覧画面が表示されます。
「プラグインを有効化しました」というメッセージと、プラグインの一覧に「Adminimize」が表示されていれば、プラグインの有効化は完了になります。

「Adminimize」プラグインの設定画面

プラグインの設定は、管理画面の「設定」→「Adminimize」の項目をクリックして表示される設定画面にて行います。

設定画面は下図のようになっています。

権限ごとにメニュー項目の非表示を設定する方法

現状のWordPressの画面が下図のようになっているとします。

試しに「Admin Bar Back end Options」の編集者権限の全ての項目にチェックを入れてみます。

編集者権限のユーザーで管理画面をみると、WordPressの管理画面のヘッダーメニューが全て非表示になっています。

もう一つ試しに、先ほどのチェックを全て外して「Dashboard options」の編集者権限の全ての項目にチェックを入れてみます。

すると、WordPressのダッシュボードのコンテンツが全て非表示になります。

上記のように「Adminimize」プラグインは権限ごとにメニューの非表示を設定することができます。

実際にメニュー項目の非表示を行ってみる

例として、今回は編集者権限を持ったユーザーのメニューを制限してみます。

制限する項目はメニューの項目になりますので「Menu Options」の項目にチェックを入れていきます。

赤色のチェックと灰色のチェックがありますが、これは大項目（メインメニュー）と中項目（サブメニュー）を分類して表示していると考えてください。
試しに、灰色の項目に全てチェックを入れると中項目のメニューが全て非表示になります。

逆に、灰色の項目のチェックを外して赤色の全ての項目にチェックを入れると、操作できるメニューがないため、許可されていないユーザーへのメッセージが表示されます。

次に、全てのチェックを外してダッシュボードの項目のみにチェックを入れてみます。

すると、ダッシュボードの項目が非表示になります。

このようにして、不要な項目に全てチェックを入れて、下図のようにメニューを変更しました。

中項目（サブメニュー）項目を非表示に設定する方法

ここまでの作業で必要な項目のみを表示するようにしましたが、メニューの中にはまだ制限したい項目があります。
それは、投稿の「カテゴリー」や「タグ」の項目です。

ここも「Menu Options」の灰色の項目にチェックを入れることで非表示にします。

チェックを入れると、メニュー項目から「カテゴリー」や「タグ」の項目が非表示になります。

これで、編集者権限のユーザーのメニューが制限できました。

ユーザーごとに適切な権限を付与してWordPressを管理しましょう

いかがでしたか？

WordPressは管理画面で様々なカスタマイズができることがメリットの一つなのですが、逆にカスタマイズし易いことが問題になってしまう場合もあります。
知識の浅いユーザーが内部の設定をいじってしまうと、復旧までに数時間、最悪の場合は数日かかってしまう場合もあります。

そういった問題が発生しないように、今回のプラグインを入れて未然に回避する必要があります。
Webサイトにおける「権限」の設定は面倒なので、管理を放置しがちな部分ではありますが、重大な問題を発生させないためにも「未然に防ぐための対策」を実施しましょう。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

今年に入ってからプラグインの記事しか書いていない気がしてきました、網干です。

今回も便利プラグインの紹介です！
今回はHTMLコードの知識が一切なくても投稿記事の文中にアイコンが設置できる「WP SVG Icons」というプラグインをご紹介致します！

本記事を読むことで、下記のようなアイコンの設置が可能になります。

ちなみに、アイコンではなく絵文字を貼り付けたい場合は、下記記事を参考にして下さい。

上記記事の絵文字と今回紹介するアイコンの違いは、色を自由に変更できる部分にあります。
サイトの構成によって合う色と合わない色がありますので、そういった部分の調整が難しいようなサイトでは今回のプラグインが役に立ちそうです。

では早速、プラグインのインストールから使い方までをご説明致します。

「WP SVG Icons」のインストール方法

WordPressのプラグインの検索で「WP SVG Icons」を検索します。
検索結果にプラグインの項目が表示されますので「今すぐインストール」を押してインストールを実行します。

インストールが完了すると「有効化」ボタンが表示されますので、有効化を押してください。

以上で、プラグインのインストールが完了になります。

投稿記事の文中にアイコンを設置する

記事の編集画面へ移動すると「Add Icon」のボタンが表示されますので、ボタンを押します。

アイコン設定画面が表示されますので、アイコンを選択して、spanタグを設定して、「Insert Icon」ボタンを押します。

アイコンを表示するためのコードが挿入されます。
※”[“から”]”までの文字はアイコンを設置するコードになります。

コードが挿入された状態で記事のプレビュー画面を見ると、下図のように表示されます。

アイコンの色を変更する

ビジュアルエディタ上で、アイコンのコードを選択した状態でWordPressの文字色を変更するボタンを押して、色を設定します。

記事のプレビュー画面を見ると、下図のように表示されます。

アイコンのサイズを変更する

ビジュアルエディタ上で、アイコンのコードを選択した状態でWordPressの文字サイズを変更するボタンを押して、サイズを設定します。

記事のプレビュー画面を見ると、下図のように表示されます。

プラグインの紹介は以上になります。

投稿記事の文字を装飾するプラグインで魅力的な装飾を！

いかがでしたか？

今回の方法はHTMLの知識を必要とせずにアイコンを設置できるので、「ビジュアルエディタでしかブログ記事を投稿できない！」という方にとっては非常に便利なプラグインになると思います。
ビジュアルエディタだけで操作できるプラグインを数多く入れることで、業者に委託しなければ実現しないような魅力的な記事が、HTMLの知識がない方でも作成できるようになるかもしれませんね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

WordPressプラグインの回し者、網干です。

今回紹介するプラグインは非常に便利で、コンテンツの装飾・表示に関しては全てこれだけで済んでしまいそうなプラグインになっています！
具体的には、下記のようなコンテンツが一分もかけずに出来上がってしまいます！

• 動きのあるアコーディオン
• スタイリッシュなボタン
• コンテンツをまとめるボックス
• 動きのある文字
• レスポンシブなYoutube動画貼り付け
• 高機能なドキュメント表示
• スライダー形式・カルーセル形式で画像を表示
• 画像や動画をライトボックスで表示
• 投稿（カスタム投稿を含む）の一覧を表示

これでも抜粋した一部の機能になりますので、とんでもないプラグインです！
上記の抜粋した部分に関して、例を交えてご紹介致します。

「Shortcodes Ultimate」のインストール方法

プラグインの検索で「Shortcodes Ultimate」を入力します。
「Shortcodes Ultimate」のプラグインが表示されますので「今すぐインストール」をクリックします。

ボタンが「有効化」に変わりますので、ボタンをクリックしてプラグインを有効化します。

以上でインストールは完了です。

記事の投稿画面を表示した際に「ショートコードを挿入」のボタンが表示されていればプラグインは正常に機能しています。

では早速「Shortcodes Ultimate」を使ってコンテンツを素敵に装飾していきましょう！

動きのあるアコーディオンを表示する

「ショートコードを挿入」ボタンを押して下図メニューを表示します。
「アコーディオン」を選択して設定画面を表示します。

コンテンツに表示されている内容が記事への投稿内容になります。
まずは「プレビュー」を押してどのように表示されるか確認をします。

ちょっとスタイルが物足りない…、という場合は「使用例」をクリックします。

すると、プラグインに登録されている様々なスタイルのアコーディオンの例が表示されます。
良さそうな例を見つけたら、例の下部にある「コードを取得」ボタンを押します。

コードが表示されるので必要な部分だけコピペします。

投稿画面に戻って、テキストエディタに先ほどのコピーした内容を貼り付けます。

これで、下記のようなアコーディオンが表示されるようになります！

スタイリッシュなボタンを設置する

「ショートコードを挿入」ボタンを押してメニューを表示します。
「ボタン」を選択して設定画面を表示します。

設定画面下部の「プレビュー」を押してボタンがどのように表示されるか確認をします。

ちょっとスタイルが物足りない…、という場合は設定画面上部の「使用例」をクリックします。

すると、プラグインに登録されている様々なスタイルのボタンの例が表示されます。
良さそうな例を見つけたら、例の下部にある「コードを取得」ボタンを押します。

コードが表示されるので必要な部分だけコピペします。

投稿画面に戻って、テキストエディタに先ほどのコピーした内容を貼り付けます。

これで、下記のようなボタンが表示されるようになります！
Click me Click me Click me Click me Click me Click me

コンテンツをボックスにまとめて表示する

「ショートコードを挿入」ボタンを押してメニューを表示します。
「ボックス」を選択して設定画面を表示します。

タイトル、スタイル、コンテンツの内容を設定してプレビューを表示します。

「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。

これで、下記のようなコンテンツの箱が表示されるようになります！

動きのある文字を表示する

「ショートコードを挿入」ボタンを押してメニューを表示します。
「アニメーション」を選択して設定画面を表示します。

アニメーションを設定してプレビューを表示します。

「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。

これで、下記のような動きのある文字が表示されるようになります！

レスポンシブに対応したYoutube動画を表示する

「ショートコードを挿入」ボタンを押してメニューを表示します。
「YouTube」を選択して設定画面を表示します。

動画のURLを設定します。

「プレビュー」を押して動画を確認します。

「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。

これで、下記のようなYouTube動画が表示されるようになります！

高機能なドキュメント表示

「ショートコードを挿入」ボタンを押してメニューを表示します。
「文書」を選択して設定画面を表示します。

文書のURLを設定します。

「プレビュー」を押して動画を確認します。

「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。

これで、下記のようなドキュメントが表示されるようになります！

スライダー形式・カルーセル形式で画像を表示

「ショートコードを挿入」ボタンを押してメニューを表示します。
「スライダー」を選択して設定画面を表示します。
※スライダーもカルーセルも入力方法は同じなので、ここではスライダーのみを表示します。

ソースを「メディアライブラリー」に設定して画像を追加します。

「プレビュー」を押して画像スライダーを確認します。

「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。

これで、下記のような画像スライダーが表示されるようになります！

Mattya_image

Curry_image

Milk Seafood_image

Noodle_image

Chease curry_mage

seafood_image

Chili Tomato_image

Sio_image

画像や動画をライトボックスで表示

「ショートコードを挿入」ボタンを押してメニューを表示します。
「Lightbox」を選択して設定画面を表示します。

コンテンツタイプをIframeに変更してコンテンツソースにURLを入力します。
※画像の場合はコンテンツタイプを画像に設定してコンテンツソースにURLを入力します。

「プレビュー」を押して表示内容を確認します。
※プレビューのボタンを押しても動画は再生されません。
　そのため、確認はWordPressのプレビューボタンから行ってください。

「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。

これで、ボタンを押した際にライトボックス形式で動画が表示されるようになります！
ここをクリックして動画を再生

投稿（カスタム投稿を含む）の一覧を表示

「ショートコードを挿入」ボタンを押してメニューを表示します。
「投稿」を選択して設定画面を表示します。

「ページあたりの投稿数」「投稿タイプ」「タクソノミー」「条件」を指定します。
※ほかにも「投稿者」「順序」等も指定できますが、ここでは上記の指定だけ行います。

「プレビュー」を押して表示内容を確認します。

「ショートコードを挿入」ボタンを押すと、投稿記事に自動でコードが入力されます。

これで、記事一覧が表示されるようになります！
※2017年2月6日加筆
　本記事に記事一覧を載せるとSNSアイコン表示プラグインが競合してしまうため、記事一覧は非表示にしました。

プラグインの紹介は以上になります。

プラグインを入れるだけで記事の装飾や表示に関することは大体できてしまいます！

いかがでしたか？

「細かい条件を指定して何かを表示させたい！」となる場合を除けば、大抵のことは「Shortcodes Ultimate」でできてしまいそうですね。
便利すぎるプラグインなので、個人的にも大きな発見となりました。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

WordPressのプラグイン記事が多くなってきました、網干です。

どうもプラグイン系の記事を書いていると、記事が長くなってしまうのが気になります。
もう少し簡単なプラグインを紹介すべきでは？　と思い始めました。

ということで、今回は便利プラグイン「jQuery Smooth Scroll」を使ってページトップに戻るボタンをカップ麺に注ぐお湯が完成する前に設置する方法を紹介します。
※ガスコンロを使用してお湯を沸かす場合は絶対に目を離さないでください！

参考記事は下記になります。
jQuery Smooth Scroll – ページトップに戻るボタンを追加できるWordPressプラグイン

今回の記事を読む事で、下記記事のようなページトップへ戻るボタンを設置することができます。

「jQuery Smooth Scroll」のインストール方法

WordPressのプラグイン検索で「jQuery Smooth Scroll」と検索してプラグインを探します。
プラグインが見つかったら「今すぐインストール」を押してインストールを行います。

インストールが終わったらボタンが「有効化」に変わるので、ボタンを押してプラグインを有効化します。

以上で「jQuery Smooth Scroll」のインストールは完了になります。

インストール後に記事一覧等のページを表示して下にスクロールすると、右下にページトップに戻るための矢印ボタンが表示されます。

どうでしたか？ お湯が完成する前にできてしまいましたね。

ボタンを別の画像に変更する

プラグインを入れた状態ではデフォルトの画像になっていますので、少しカスタマイズしてみましょう。
具体的には、右下の画像を変更してみます。

プラグイン編集の「編集するプラグインを選択」の箇所から「jQuery Smooth Scroll」を選択します。

プラグインファイルの「jquery-smooth-scroll/css/jss-style.css」を選択します。

backgroundのurlで囲まれた部分を設定したい画像のurlに変更します。

今回は非常にキュートな某T氏のアイコンを右下に設定してみましょう！

「ファイルを更新」ボタンを押すと、右下にキュートな某T氏の画像が表示され…！

あっ…画像サイズが…

…、まぁいいか…。

画像のサイズには注意が必要ですね！

簡単なプラグインを使って短時間でホームページを改良しましょう

いかがでしたか？

こだわりたい部分はトコトンこだわって、こだわらなくて良い部分はプラグインで対処してしまうことも時には大事です。
こだわらなくて良い部分に時間を割かないためにも、インストールするだけで済んでしまうプラグインというのは知識として持っていると役に立ちそうですね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

WordPressのプラグインを眺めるのが楽しいです、網干です。

WordPressのプラグインは優秀なモノが多いので、何かを実装する前にまずはプラグインを検索するのがクセになっています。
細かいギミックはプログラムを組む必要がありますが、大きな仕掛けはプラグインでなんとかなったりすることが多いですね。

さて、今回はそんな便利プラグインの一つ「Smart Slider 3」を使って簡単にコンテンツスライダーを作る方法を記載します。
なんと、このコンテンツスライダーは標準でレスポンシブ対応していますので、別途CSSの設定をする必要がない素晴らしいプラグインなのです！

参考記事は下記になります。
Smart Slider 3 – 高機能で使いやすいコンテンツスライダーのWordPressプラグイン

「Smart Slider 3」のインストール方法

WordPressのプラグイン検索で「Smart Slider 3」と検索してプラグインを探します。
プラグインが見つかったら「今すぐインストール」を押してインストールを行います。

インストールが終わったらボタンが「有効化」に変わるので、ボタンを押してプラグインを有効化します。

プラグインが有効になると、WordPressのメニューに「Smart Slider」が追加されます。

以上で「Smart Slider 3」のインストールは完了になります。

コンテンツスライダーの設定方法

プラグインをインストールするとサンプルもついてきますので、そこからいじるのが一番早いのですが…。
こういった機能はいじらないと身につかないので、新規作成からコンテンツスライダーを作っていきましょう！

WordPressのメニューの「Smart Slider」をクリックするとダッシュボードが表示されます。
左側のアイコンの「NEW SLIDER」をクリックします。

今回は画面の下部にサムネイルのついたスライダーを作ります。
そのため、新規作成時のスライダーの選択画面でサムネイル付きのスライダーを選択します。

スライダーを作成すると下図のような画面が表示されます。
画像を一つ以上登録しないとスライダーの設定ができないので、とりあえず「Slide #1」をクリックして画像を設定します。

画像を設定したら右上に下図のようなウインドウが表示されるので「GOT IT!」をクリックします。
※このウインドウは設定の成功/失敗等のメッセージが表示される箇所になりますので、基本的には「GOT IT!」を押して大丈夫です。

次に、スライダーの設定をしていきます。

メニューの「GENERAL」をクリックしてスライダーの概要を設定します。
ここでは「Name」の欄にスライダーの名前を入力します。

次に「AUTOPLAY」の項目でスライダーの自動スライドの設定を行います。
ここでは自動スライドの間隔を二秒に設定します。

次に「ARROWS」の項目でスライダーの左右に表示される矢印マークのボタンを設定します。
今回は下図のような矢印を設定します。

矢印マークを強調するために、背景に色を設定することもできます。
ここでは透明度のあるグレーを選択します。

次に「TEXT BAR」の項目で画像のタイトルと概要が表示されるように設定します。

タイトルと概要の区切りの仕様を「Separator」の項目にて設定します。
今回はタイトルと概要の区切りを改行にします。

上記の設定が全て完了したら、ウインドウ右上の「SAVE」ボタンで保存を行います。

以上で、スライダーの設定は完了になります。

スライダーに表示する画像の設定

次に、スライダーに表示する画像を設定します。
現状で設定されている画像にマウスカーソルを合わせると「EDIT」という文字が表示されます。
画像をクリックすることで画像の設定画面が表示されます。

はじめに「Settings」ボタンを押して画像の設定画面を開きます。

「Name」に画像のタイトル、「Description」に画像の説明を入力します。
※ここで設定したタイトルと説明がスライダーの下部に表示されます。

画像のタイトルと説明を入力したら、SAVEボタンを押して設定を保存します。

次の画像を設定するために「SLIDES」ボタンを押して画像の一覧画面に戻ります。
※画像のタイトルや説明を変更しても、表示が更新されないことに注意してください。
　保存が実行されていれば問題ないのでそのまま作業を進めてください。

「NEW SLIDE」を押して新しいスライドを作成するのも良いのですが、ここでは初めに設定した画像の複製を作ります。
画像右上の「…」をクリックしてメニューを表示させて「Duplicate」を押します。

画像が複製されますので、複製した画像をクリックして画像の設定を行います。

複製した画像を変更するために「Background」ボタンを押して画像を変更します。
「Background」の「image」の項目を押して、一枚目とは別の画像を選択します。
※画像を設定しても表示が更新されないことに注意してください。

次に「Settings」ボタンを押して、画像のタイトル、説明、サムネイル画像を設定します。
※サムネイル画像は「Background」で設定した画像を設定してOKです

設定が終わったら「SAVE」ボタンを押して設定を完了します。

設定が正しいか確認をするために、WordPressのメニューの「Smart Slider」を押して、先ほどまで編集していたスライダーを選択して設定の再読み込みを行います。

設定中は画像イメージが変わりませんでしたが、再読み込みをすることで設定した画像が正常に表示されます。

画像が二枚では寂しいので、同じ設定の画像を複数作成します。

画像を複数作成したら、画面左上の「PREVIEW」ボタンを押してスライダーの確認を行います。

ディスプレイで見た場合は下図になります。

上のアイコンを変更することで、ipadのような画面で見た場合やスマホで見た場合のプレビューも表示されます。

以上で、画像の設定は完了になります。

ショートコードを使って投稿記事にコンテンツスライダーを表示する

設定が全て完了したら、スライダー設定画面の「PUBLISH」の項目でショートコードを確認します。

投稿画面でショートコードを入力します。

記事を投稿すると「Smart Slider」のプレビュー画面でみたようなコンテンツスライダーが表示されます。

もちろん、レスポンシブに対応していますので画面を小さくしてもスライダーは正常に表示されます。

今回は以上になります

プラグインをうまく使って魅力あるコンテンツを短時間で作りましょう！

いかがでしたか？

コンテンツスライダーのような大掛かりなギミックは、一から組もうとすると非常に多くの時間を割くことになってしまいます。
こういった部分をプラグインで時間短縮できれば、別の場所に力を注ぎ込むことでより素晴らしいWebサイトを作成することができます。

WordPressを使用したWebサイト制作を行う際は、まずはプラグインを探す事から始めるといろいろと捗りそうですね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

本日発売の「一平ちゃんショートケーキ味」が食べたい網干です。
コンビニ6件、スーパー2件と回りましたが一向に見当たらず…、どこに売っているのでしょうか(´・_・`)
今夜は商品を探して徘徊しようと思います。

というわけで、今回はWordPressの記事翻訳プラグイン「Google Language Translator」を使って、記事を他の言語に変換するボタンを設置する方法をご紹介致します。
先週、私が書いた「GoogleMap作成プラグイン」に引き続き、今回も便利プラグインの紹介になります。
ちなみに、前回はこんな記事を書いています↓

今回の記事を読むことで、下図のような翻訳ボタンを設置して、ボタンを押すことで翻訳ページを表示することができるようになります。

「Google Language Translator」をWordPressにインストールする

まずはじめに、[プラグイン]→[新規追加]から「Google Language Translator」を検索します。

下図の「Google Language Translator」の「今すぐインストール」を押します。

インストールが完了すると「有効化」ボタンが表示されますので、「有効化」ボタンを押します。

プラグインの有効化が完了すると[設定]タブの中に[Google Language Translator]が表示されます。

これで、プラグインのインストールは完了になります。

Google Language Translatorの設定を行う

次に、Google Language Translatorの設定を行います。
…といっても、プラグインのインストールが完了していると、設定画面で特に設定をしなくてもそのまま使えます。
実際に使ってみるとこんな感じに表示されます。

ですが、設定をすることで自分の好みにカスタマイズができますので、いろいろと設定内容を見てみましょう。

機能の有効化/無効化の設定

サイトの言語設定

翻訳言語の設定

翻訳言語の国旗アイコンの表示/非表示設定

翻訳言語の国旗アイコンの表示指定

ウィジェットの表示設定

ちなみに、ウィジェットをクリックすると下図のように国旗アイコンが表示されます。
アイコンをクリックするとページを翻訳して表示します。

ウィジェットの表示/非表示設定

ロゴの表示位置設定

グーグルツールバーの表示/非表示設定

ツールバーを表示設定にすると、ページの上部に下図のようなツールバーが表示されます。

ロゴの表示/非表示設定

非表示にすると下図のような表示になりますが、基本的には表示のままにしましょう。

翻訳ボタン等の表示位置設定

翻訳管理機能の有効化/無効化設定

グーグルアナリティクスの設定

チェックを入れて設定ボタンを押すと、グーグルアナリティクスのIDを入力する項目が出現します。

投稿ページや固定ページで使う際のショートコード

ヘッダーやフッターに設置する際のPHPコード

言語変換を実行するリンクを張るコード

例として、投稿ページに上記のコードを設置する場合は下図のように使います。
※下図の例では英語翻訳のリンクを設置しています。

上記の設定でページを見ると、下図のようになります。

リンクになっている箇所をクリックするとページが翻訳されます。

使用例：ヘッダーに翻訳変換ボタンを設置

使用例として、ヘッダーに翻訳変換ボタンを設置する例を紹介します。
下図のように、header.phpの表示したい箇所にPHPコードを埋め込むと翻訳ボタン等が表示されます。

いかがでしたか？

WordPressのプラグインの良いところは「実装が簡単」という部分だけではなく、
プラグインを使用することで「WordPressで何ができるのか？」を知ることができる部分にもあると思います。

WordPressでできることを知り、技術を習得し、自身の技術を上乗せしてよりよい機能を作っていく。
そんな技術者になっていきたいですね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

降雪の翌日に、駐輪場の自転車が泥だらけになっていて憂鬱な気持ちになった網干です。
どうやら、家の屋根の雪が滑り落ちた際に泥が跳ねて自転車が犠牲になったようです…。
駐輪場に屋根はあるのですが、こればかりはどうやっても回避できません…(´・_・`)

というわけで、今回はWordPressのGoogleMap作成プラグイン「Maps Builder」を使って、複数のピンを立てた地図をサクッと作る方法をご紹介致します。

今回の記事を読むことで、下図のようなGoogleマップが作成できます！

無料でお手軽なGoogleMap作成プラグイン「Maps Builder」をWordPressにインストールする

まずはじめに、WordPressに「Maps Builder」をインストールします。

WordPressの管理画面から[プラグイン]→[新規追加]で、右上のキーワードに「Maps Builder」と入力してください。

「Maps Builder」を入力すると「Maps Builder – Google Maps Plugin」というプラグインが表示されます。
プラグインの右上の「今すぐインストール」を押してください。

インストールが終わると「有効化」ボタンが出現しますので、有効化を押してください。

有効化を押すと、先ほどまでサイドバーになかった「Google Maps」という項目が追加されます。

これで、「Maps Builder」のインストールは完了になります。

GoogleMapの基本設定を行うために「Maps Builder」の初期設定を行う

サイドバーの[Google Maps]を押して下さい。

[Google Maps API Key]の設定

APIキーの取得方法に関しては、下記のURLを参考にしてください。
Google Maps の APIキー を簡単に取得する

上記の方法で取得したAPIキーを[Google Maps API Key]の項目に入力してください。

[Default Location]の設定

LatitudeとLongitudeの数値はGoogleMapを使って出します。
GoogleMapで中心地点の場所を検索すると、URLに下記のような数値がついています。
「!3d」から「!4d」までの数値がLatitudeの値、「!4d」から末尾までの数値がLongitudeの値となっています。

今回は弊社事務所の位置を中心に設定します。

GoogleMapにピンを立てる

すると、[Default Location]で設定した位置を中心にしたGoogleMapのプレビュー画面が表示されます。

まずはじめに、「ここにタイトルを入力」の箇所に今回作成するマップのタイトルを設定します。
今回は弊社の周辺の施設紹介マップを作成したいので「Incloop周辺施設の紹介」とします。

次に、マップにピンを立てていきます。
プレビュー画面の下の方へスクロールすると[Map Markers]の項目があります。
マップへのピン立ては[Map Markers]の[Create Marker]の項目で行います。

では早速、実際にピンを立てていきましょう。

ピンの一つ目は弊社事務所のある「相模原商工会議所」にピンを立ててみます。
[Create Marker]に「相模原商工会議所」を入力すると検索候補が出現します。

検索候補の一番上の場所で設定したいので、上の項目をクリックします。
すると、プレビュー画面に緑のマーカーが設定されます。

まだこの時点ではマーカーが確定していないため、仮のピンが立っている状態になります。
緑のマーカーをクリックすると住所が表示されますので、正しい位置であることを確認します。

ピンを立てたい場合は[Add to Map]のボタンを押して下さい。

すると、ピンが確定してマーカーが赤色のおなじみのマークになります。

さて、ここからがこのプラグインの凄いところです！
ピンを立てた場所に、情報を追加するテキストフィールドが表示されていることにお気づきでしょうか！

このテキストフィールドには、付加情報を追加することができるのです！

画面上で「相模原商工会議所」となっている箇所にはピンのタイトルが入りますので、弊社の名前「Incloop株式会社」に変更します。
下のテキストフィールドは追加の情報入力項目になりますので、弊社の情報を記載します。

しかし、このままではスマホで見た際にホームページも電話番号もワンタッチで操作できないのが不便…。
と、思いきや！
なんと、この項目はHTMLタグに対応しているため、こんな書き方ができてしまうのです！

この状態で[Save]ボタンを押してピンを確定します。

これでピンの設定は完了になります。
ちなみに、設定したマーカーは下記の箇所をクリックすることでマーカーの設定が表示されますので、変更することもできます。

では、同じ方法でどんどん周辺のピンを追加していきます。

これで、ピンの追加は終わりました。
次に、マップを表示する際の中心座標を設定します。
右側のサイドバーの[Display Options]をクリックしてメニューを表示します。
サイドバーの[Latitude]と[Longitude]に中心にしたい座標を設定します。
ここでは弊社の位置を中心に設定します。
※値を設定してもマップのプレビュー画面が移動しない場合は[Longitude]の下部に[Update]等のボタンがありますので、ボタンを押して下さい。

以上で、マップの設定が完了になります。
サイドバーの[公開]または[更新]ボタンを押してマップを確定します。

これで、ピン付きのマップの作成が完了しました！

複数のピンを設定したGoogleMapを記事に表示する

投稿記事の編集画面に移動して、ショートコードをペーストします。

表示されました！
ピンをクリックすると詳細のリンクもしっかりと設定されています！

これで、HTMLタグを埋め込んだ複数のピンを立てたGoogleMapを作成することができました。

いかがでしたか？

WordPressのプラグインは数が非常に多いため、好みのプラグインを探すのはなかなか大変なんですよね…。
ですが、プラグインが見つかれば作業時間を大幅に減らすことができるので、WordPressで何かをする際には必ずプラグインを探すことから始めるのが良いかもしれませんね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。