カテゴリー: WordPress

サイトをHTTPS化した際、外部リンクがうまくいかなくなっていたので、今回修正した内容をメモとして公開。

※今回参考にさせていただいたサイト

出来ること

Webサイトの外部リンクを１ステップでサイトのイメージとリンクを取得して記事に張り付け可能。
※上のリンクが簡単に作成できるようになります。

必要となるもの

・WordPressを利用したサイト
・WordPressのアドオン「Browser shots」
・Google Chrome
・Google Chrome 拡張機能「Create URL」

あたりまえですが、WordPressを利用したサイトを基本としています。

なお、Google Chrome の拡張機能である「Create Link」は、Chromeブラウザからアクセスする必要があります。

実際の設定手順

WordPressで実施する内容とChromeで実施する内容についてです。

WordPressプラグインの追加

WordPressの管理画面のメニューから
プラグイン＞新規追加

検索する際のワードは「Browser Shots」で大丈夫でした。
※2019/09/08現在

そのまま、追加をクリックし有効にします。

WordPressのCSS変更

下記CSSをWordPressに追記します。

/*——————————–
キャプチャ　Browser Shots
———————————*/
.share_link {
width:85%;
margin: 30px auto;
padding: 20px;
border:double #CCC;
overflow: hidden;
}
.browser-shot{
text-align:center;
}
.browser-shot img{
box-shadow:0px 2px 4px #CCCCCC;
}
.link_title{
text-align:center;
line-height:150%;
overflow: hidden;
padding-top:20px;
}
/*media Queries タブレットサイズ
—————————————————-*/
@media only screen and (max-width: 780px) {
}
/*media Queries タブレットサイズ
—————————————————-*/
@media only screen and (min-width: 380px) {
}
/*media Queries PCサイズ
—————————————————-*/
@media only screen and (min-width: 780px) {

/*——————————–
780px キャプチャ　Browser Shots
———————————*/
.share_link {
margin:30px auto;
}
.browser-shot{
margin:0 15px 0 0;
float:left;
text-align:left;
}
.share_link .link_title{
margin:0;
text-align:left;
}
/*– ここまで –*/
}

なお、参考とさせていただいたサイトは、「Style.css」を修正としていますが、テーマを変更したくありません。

現在では、
外観＞カスタマイズ＞追加CSS
へそのまま張り付けるほうが良いでしょう。
※というか、テンプレート変えてもここは変更されないので、極力テーマのCSSSはいじらないほうが良いかと。

Google Chrome のダウンロードインストール

「Chromeをダウンロード」
をクリックし、
「同意してインストール」
をクリックします。

あとは、Chromeがインストールされ、ショートカットがデスクトップにできるはずです。

Google Chrome の拡張機能「Create Link」の追加と設定

Google Chrome から上記リンクへアクセスし、追加します。

すると、Google Chrome のアドレスバー右側にアイコンが追加されます。

※こんな感じのアイコンです。

アイコンをクリックし、
「Configure」を選択します。

Formats
の下にいくつかありますが、
ここにある＋クリックし１つ行追加します。

nameをダブルクリックし、名前を入れます。
※例として「add」としています。

次に、formatの列に移動します。

こちらに

<div class="share_link clearfix"> <div class="browser-shot"> <div style="float:left; margin-right:10px;"> 
［browser-shot url="%url%" width="150" height="112"］
 </div> <a style="color:#0070C5;" href="%url%">%htmlEscapedText%</a>
 <a href="//b.hatena.ne.jp/entry/%url%"> <img border="0" src="//b.hatena.ne.jp/entry/image/%url%" alt=""> </a>
 <div style="clear:both;"></div></div></div><br/>

を追記します。
※”［”と”］”が全角なので、半角に修正してください。
※あくまで例。ちょっとおかしな挙動をしてますし。

あとは、上側にある
「Default is currently」
を追加したものへ変更します。

※追加したものが表示されない場合は、一度閉じもう一度「Configure」を表示します。

続いて、
「Configure shortcut」
をクリックします。

拡張機能のショートカット設定ができます。

今回は「ctrl+3」
を設定してみました。

リンクを作成したいサイトを表示し、設定したショートカットキーを押下し、
WordPressの投稿に張り付け、下書きとして保存。

プレビュー表示で確認して表示できているか確認しておきましょう。

最後に

元々「Copy URL +」という拡張機能を使っていたのですが、サポート切れかなにかで拡張機能として発見できなかったので、
「Copy URL +」で利用していたものを「Create Link」用に変更しました。

２年ぐらい放置していたリンクがやっときれいに作れるようになり、ほっとしました。
ぼちぼち更新していきます。

ではでは。