Web担当者の備忘録

Web制作やWebマーケティングに関するブログです

Wordpressの内部リンクをショートコードで記述するプラグイン

Wordpress(ワードプレス)で制作しているサイトがあるのですが、ある記事のタイトルやURLを変更した際に、他の記事から変更した記事へ貼っている内部リンクを変更するのがとても面倒くさく感じました。

そこで内部リンクをWordpressのショートコードを使って記述しておけば、リンク先の記事タイトルやURLが変わっても自動的にアンカーテキストやURLが変わってメンテナンス的に楽ちんなのでは?と考え、実現できるWordpressプラグインを探してみました。

 

 Shortcodes Ultimate

Shortcodes Ultimate

いろいろプラグインを探して試してみたところ、一番使い勝手が良かったのが、このShortcodes Ultimateでした。

 

Shortcodes Ultimateすべてのショートコード

Shortcodes Ultimateにはさまざまなタイプのショートコードが用意されていて、内部リンクのショートコード以外にもいろいろ使ってみたくなります。

 

f:id:yuki_hiro_3:20180907124225p:plain

内部リンクのショートコードについては、「パーマリンク」というショートコードを使います。

 

f:id:yuki_hiro_3:20180907124339p:plain

ショートコードの”id”のところに投稿記事のidを指定することで、該当記事の投稿タイトル&URLのショートコードになります。

 

f:id:yuki_hiro_3:20180907124833p:plain

投稿記事のidを確認するには、投稿一覧画面にて記事タイトルにマウスを重ねてください。post="数字"が表示されるので、その数字を先ほどのショートコードのidに設定します。

 

(例) [su_permalink id="1578" target="self" class=""]

 

上記ショートコードを別記事作成時に使用することで、内部リンクをはることができます。

 

終わりに

 手動で内部リンクをはっていると、あとでリンク先の記事のタイトルやURLを変更した場合にいちいちはり替える必要があります。ショートコードを使って内部リンクをはるほうがメンテナンス効率が良いように思います。

 

 

はてなブログのプロフィールを変更する方法

久々にはてなブログにログインして、サイドバーのプロフィールを変更しようとしたのですが、思いのほかプロフィール編集場所を探すのに時間がかかったので方法をメモ

 

1. はてなブログダッシュボードで「デザイン」をクリック

f:id:yuki_hiro_3:20171003212509p:plain

2. スパナのアイコンをクリックし、サイドバーをクリック

f:id:yuki_hiro_3:20171003212603p:plain

 

3.プロフィール項目の編集をクリックしブログの説明を編集し適用ボタンをクリック

f:id:yuki_hiro_3:20171003212910p:plain

Googleフォームによるお問い合わせフォームの作り方

f:id:yuki_hiro_3:20160521202746j:plain

 前回の記事Amazonで使える自作のChrome拡張機能AmaTunes」を紹介しましたが、まだ不具合などの対応窓口がありませんでした。そこで無料で使えるGoogleフォームを利用して、対応窓口となるお問い合わせフォームを作ってみました。


Googleフォームとは?

 Googleが無料で提供するオンラインフォームサービスです。企業や個人のWebサイトのお問い合わせフォームとして利用できるほか、多くの人から回答をもらうためのアンケートツールとして利用することもできます。PCとスマホの両方に対応しており、フォームからの回答は自動的に整理して集計され、リアルタイムに回答状況やグラフを見ることができます。

 

f:id:yuki_hiro_3:20160521211609j:plain

↑実際に作ったお問い合わせフォームです。こんな感じでフォームを作ることができます。


お問い合わせフォームの作り方

それではGoogleフォームを使った作り方を説明していきます。

 

1.Googleフォームにアクセスし、「Googleフォームを使う」ボタンをクリック

2.右下の「新しいフォームを作成」ボタンをクリック

f:id:yuki_hiro_3:20160521213419j:plain

 

3.フォームタイトルおよびフォームの説明を入力f:id:yuki_hiro_3:20160521214250j:plain

4.質問項目の作成

f:id:yuki_hiro_3:20160521215107j:plain

フォームの質問項目を作成します。項目は9項目から選択設定していきます。

 

記述式:名前やメールアドレスなど短文での回答を入力する項目

段落:お問い合わせ内容など、複数行の回答を入力する項目

ラジオボタン複数の選択肢から一つを選択する項目

チェックボタン:複数の選択肢から複数を選択する項目

プルダウン:プルダウンの複数の選択肢から一つを選択する項目

均等メモリ:1~5や1~10などの数値で程度を選択する項目(例えば、接客態度はどうでしたか?などの質問であれば、1が全然良くなかった、5が素晴らしかったなどと設定)

選択式(グリッド):"はい"か"いいえ"で答えるような2択の質問を複数設定する項目

日付:日付を入力する項目

時刻:時刻を入力する項目

 

今回は不具合対応としてフォームを使いたかったので以下のような項目を設定しました。

お名前:記述式

メールアドレス:記述式

お問い合わせ種別:ラジオボタン

お問い合わせ内容:段落

 

お問い合わせ種別とお問い合わせ内容の項目は入力必須にしました。

f:id:yuki_hiro_3:20160522090437j:plain

質問項目の設定時に右下のスイッチで入力必須にすることができます。

 

また、質問項目について補足説明を入れたい場合は、右下より「説明」にチェックを入れると補足説明の入力欄が表示されるので補足説明を入力します。

f:id:yuki_hiro_3:20160522091231j:plain

 

5.背景の変更

デフォルトだと背景色が紫になっているのですが、変えたい場合は右上のカラーパレットから色やテーマを変更することもできます。

f:id:yuki_hiro_3:20160522093256j:plain

f:id:yuki_hiro_3:20160522093321j:plain

 

6.お問い合わせフォームに回答があったとき、メール通知が来るよう設定

「回答」を選択し、「新しい回答についてのメール通知を受け取る」にチェックを入れます。

f:id:yuki_hiro_3:20160522094906j:plain

 

7.プレビューで確認

全部設定が完了したら、右上のプレビューボタンから回答いただく方にどう見えるのか確認します。

f:id:yuki_hiro_3:20160522093945j:plain

 

8.動作するかテスト

プレビューでフォームを確認後、それがきちんと動作するか自分でフォームに入力、送信しチェックします。

f:id:yuki_hiro_3:20160522100801j:plain

f:id:yuki_hiro_3:20160522100919j:plain

f:id:yuki_hiro_3:20160522101533j:plain

自分のGmailにメール通知が来ること、お問い合わせ完了画面が表示されること、回答が集計できていることを確認できたらOKです。

 

お問い合わせフォームの設置の仕方

  Webサイトに設置したい場合は、作ったフォームのHTMLタグを挿入します。右上の「送信」ボタンより、タグを選択し出力されたiframeタグをコピーします。フォームのサイズを指定したい場合は幅と高さを設定してからコピーしてください。

f:id:yuki_hiro_3:20160522103211j:plain

 あとは設置したい場所にコピーしたiframeタグを挿入します。試しにブログ記事中にフォームを埋め込んでみました↓

すごく簡単に設置できました。

あと、タグを埋め込む形式以外に、回答者にフォームのリンクを知らせる方法もあります。その場合は右上の「送信」ボタンより、リンクを選択しそのリンクURLを回答者に教えます。

f:id:yuki_hiro_3:20160522111049j:plain

短縮URLにチェックを入れると、URLを短くしてくれます。

 

フォームを作ってみた感想

 Googleフォームを使ってフォームを作成するのは初めてだったのですが、特に迷うことなくさくさくフォームを作ることができました。簡単なお問い合わせフォームやアンケートであれば無料で使えるGoogleフォームで十分ではないでしょうか?飲み会などの参加者の集計にも使えると思うので、お問い合わせフォーム以外にもいろいろ用途を考えて使ってみたいと思いました。

AmazonのCDと同タイトルがiTunes Storeにあるか教えてくれるChrome拡張機能「Amatunes」を作りました

f:id:yuki_hiro_3:20160430103342p:plain

 むかしから音楽が好きでアルバムをよく購入します。購入するのはもっぱらAmazoniTunesなのですが、節約のためにどちらのほうが安いか確認してから購入するようにしています。

PCのブラウザでAmazonに行き、目的のアーティスト名やアルバム名で検索し価格を確認後、iTunesのソフトを立ち上げてiTunes Storeから同様に検索して価格を確認する、というのがいつも行う作業なのですが、これ、けっこう面倒だなと前から感じていました。なのでこれを解決するツールChrome拡張機能で作ってみました。

 

Amatunesの機能

 AmazonでCDの商品ページを閲覧したとき、同タイトルと思われるiTunesのデータをテーブル表示します。名前からすぐに分かってしまうとは思いますが、AmazoniTunesを組み合わせて名前をつけました。iTunes APIを利用して実装しています。

f:id:yuki_hiro_3:20160429184121p:plain

↑ こんなかんじでiTunesを検索した結果を最大5件までAmazonの商品ページに表示します。各データは1行が1つのでデータで、列ごとにアートワーク、アーティスト名、タイトル、曲数、価格、発売日の情報です。

上の場合はiTunesを検索した結果データが見つかった場合ですが、データが見つからなかった場合は以下のような表示になります。

f:id:yuki_hiro_3:20160429191048j:plain

↑このようにジャケ写の下に「iTunes Store検索結果:該当するデータが見つかりませんでした。」と表示されます。

 

Amatunesのメリット

 AmazoniTunesのどちらが安いのか一発でわかるため時間お金を節約できます。

iTunesのソフトってけっこう重くて立ち上げに時間がかかるので、自分のように音楽を聴くとき以外は極力立ち上げたくなくないって人は多いかと思います。Amazonの商品ページを見てAmazonのほうが安ければiTunesを立ち上げなくていいので時間の節約につながります。

また普通に販売されているアルバムも簡単に価格比較できていいのですが、発売から時間が経って再販されていないアルバムはAmazonで価格がものすごく高くなっていたり、発売直後でAmazonの在庫がなく転売ヤーが価格を釣り上げている場合などは特にメリットが大きいかと思います。

たまにAmazonだけを見て買ってしまい、後からiTunesのほうがすごく安かったことに気づくことが何回もありました。Amatunesがあればそうした事態を防ぐことができます。

 

導入方法

  ChromeウェブストアにPCのGoogle Chromeでアクセスし、以下の拡張機能のページからChromeにインストールしてください。

▼Amatunesインストールページ

f:id:yuki_hiro_3:20160429192742j:plain

Amazonの商品ページに何も表示されない場合は、Chrome右上のメニューボタンから、拡張機能が有効になっているか確認してください。

f:id:yuki_hiro_3:20160429205556j:plain

 

使用した技術、ツール

 テーブル表示には、HTML5とCSS3を、iTunesからの楽曲データの取得はJavascriptからiTunes APIを使用し、Amazonの商品ページDOMからのデータ取得はjQueryを使用しました。プログラミングはテキストエディタSublime Textで行いました。

 

作ってみた感想

 大学時代にC言語Objective-Cを少しかじったことがある程度で、SIerに就職後はほとんどプログラミングをしていませんでした。ブランクとしては6年以上あります。今回使用したJavascriptは大学時代もさわったことがなかったので、簡単なJavascriptのテキストを1冊買ったのと、ドットインストールやschooなどのプログラミング学習サイトで勉強しつつ、わからないことがあるたびにググりながら制作を行いました。

 本当に久しぶりのプログラミングだったので、配列とかfor文とか懐かしいみたいな状態でした(笑) 大学時代にはじめてやったC言語でのプログラミングが全然できなくて、プログラミング自体に苦手意識があったのですが、自分の作りたいものがあるせいかそのへんを気にすることなく楽しく制作することができました。作りたいものがあると勝手に学習意欲が湧くみたいです。

 制作期間はだいたいアイディアを思いついてから1ヶ月くらいです。当初想定していたリクエストの仕方じゃデータが取得できなかったり、Chrome拡張機能からクロスオリジンでiTunesにリクエストするにはどうすればいいかなどの初歩的なところで手間取ったりしつつも、一つ一つ問題を解決しながら完成させることができました。

 

今後の修正・改善

 一応形としては完成ですが、アーティストによってはうまくiTunesからデータの取得ができていないものがあったりしたのでその修正をやっていくのと、データをテーブル表示するだけでなく試聴プレイヤーも表示させて試聴できるような機能も作りたいと思っています。

アルバムによってはAmazonの商品ページで試聴できるものがありますが、できない商品ページも多々あるので、iTunesからデータを持ってきて試聴できるようにすればより便利になるんじゃないかと考えています。

あと現在、AmazonのCDカテゴリの商品のみを対象にしていますが、デジタルミュージック(MP3)のカテゴリなどにも対応していきたいと考えています。そしてゆくゆくは音楽だけでなく、DVDやBlu-rayなどの映画のカテゴリにも対応していけたらと考えています。

参考サイト

Getting Started: Building a Chrome Extension

iTunes APIの使い方まとめ

Google Chrome拡張機能入門