ワードプレスでプラグインを作る方法をこのページの右上に付いている、「ショートリンク生成機能」として実際に動作しているプログラムを全てコードも含めて公開いたします。
このプラグインは、ワードプレスのパーマリンクを使用すると長ったらしい日本語のリンクとなり、それはSEO効果があるのですがリンクをしたいユーザーにとってはリンクしづらいという問題点を解決する為に作成しました。
ショートリンクはワードプレスの基本URL表記方式 ？p＝形式 で取得しています（このURLにアクセスするとワードプレスが自動でパーマリンクにリダイレクトしてくれます）。
この記事の目次
プラグインの基本情報をPHPファイルのヘッダーに挿入する
ワードプレスのプラグインは普通のPHPファイルです。（<?php ?>で囲まれたものですね）最初に空っぽのPHPファイル（名称は何でもかまいません）を用意されたら、ワードプレスでプラグインを動作させる基本情報をヘッダーにコメントとして書き込んでいきます。
/** * @package WPD Post Link Maker * @version 1.0 */ /* Plugin Name: WPD Post Link Maker Description: Adds short link maker to a post Author: WP Doctor Author URI: https://wp-doctor.jp/ Version: 1.0 */
@package,Plugin Name: ー プラグインの正式名称を記載します
Description: ー プラグインの簡潔な説明文を記載します
Author: ー 作成者の名前を記載します
Author URI: ー 作成者のホームページURLを記載します
@version、Version: ー プラグインのバージョンを記載します
全ての投稿の上部に自動的に任意のHTMLやJavascriptを追加するコードを追加する
次にプラグインに、全ての投稿の上部に自動的に好きなコードを追加できるフックを追加します。フックとはワードプレスが様々な描画を行う際にその前に処理が実行されるタイミングで任意のコードをプラグイン側で追加できる仕組みです。
今回はコンテンツが表示される際に実行される、the_contentというフックを使用します。
ヘッダーの下に下記のコードを挿入します。
add_filter('the_content','post_shortlink');
function post_shortlink($content = '') {
}
add_filterという部分がフックを有効にする関数で、the_contentがフックの種類ですね。このフックで実際に処理を行う関数名がpost_shortlink（この部分は任意の名前でかまいませんがその下のfunctionの名称と同一である必要があります）です。
the_contentフックは、自動でワードプレスの投稿内容を$contentという変数に入れてくれます
単一の投稿を表示するときだけコンテンツの上部に任意のコードを挿入する
このプラグインは、単一投稿の表示時だけ動作させたいので、if文でis_single()という単一投稿を判定する関数で条件分岐し、単一投稿のときだけ、$slinkという文字列をコンテンツ（$content）の最初に追加して返しています。
＊もちろん現在は$slinkには何の値も入っていませんのでこのプラグインを動作させても表示は何も変化しません
add_filter('the_content','post_shortlink');
function post_shortlink($content = '') {
if(is_single()) {
return $slink.$content;
}else{
return $content;
}
}
ショートリンク機能を実装する
それでは、$slinkにショートリンクをユーザーが取得できるような機能を実装していきましょう。
global $post;
$slink = htmlentities("<a href='".get_home_url()."/?p=".$post->ID."' target='_blank'>".get_the_title()."</a>");
＊このコードはfunction内のif(is_single()) {文の中に挿入します。
global $post ー このコードは現在表示中のポストIDを取得する為の物です
get_home_url() ー この関数でワードプレスのトップURLが取得できます。トップURLと/?p=と$post->ID（ポストID）を組み合わせればショートリンクの出来上がりです
get_the_title() ー このコードで現在表示中の投稿のタイトルを取得できます
htmlentities( ー この関数でくくったのは、出力する文字列をHTML文としてブラウザに解釈させずにエスケープして出力する為です
このコードプラグインとして動作させると、コンテンツの前に下記のように表示されます。
<a href=’https://wp-doctor.jp/blog/?p=2232′ target=’_blank’>ワードプレスのプラグインを作成してみよう：ショートリンク生成プラグイン</a>
ユーザーの方はこのコードをコピペして好きな場所に張り込めるのでとても便利ですね。
ボタンを押したときだけ、ショートリンクを表示する
次に、このショートリンクをボタンを押したときだけ表示する機能を実装していきます。↓コードはこんな感じです
$slink ="
<button id='wpd_getlink' onClick='showwpdlink()'><i class='icon-pencil'></i> この記事のショートリンクを取得 </button>
<div id='wpd_getlinktx'><b>下のリンクをコピーされてください</b>
<div style='float:right'><a href='javascript:void(0)' onClick='hidewpdlink()'>X</a></div>
<hr style='margin:0px;border:solid 1px #ddd'>
<br>".htmlentities(<a href='".get_home_url()."/?p=".$post->ID."' target='_blank'>".get_the_title())."</a>
</div>
";
wpd_getlinkのIDを持つDIVがショートリンク表示ボタン、wpd_getlinktxのIDを持つDIVがショートリンクのHTMLを含んだDIVです。
Javascript showwpdlink()とhidewpdlink()がDIV要素の表示非表示を制御します。それぞれのスクリプトのコードは下記のようになります
<script>
function showwpdlink() {
document.getElementById('wpd_getlink').style.display = 'none';
document.getElementById('wpd_getlinktx').style.display = 'block';
}
function hidewpdlink() {
document.getElementById('wpd_getlink').style.display = 'block';
document.getElementById('wpd_getlinktx').style.display = 'none';
}
</script>
デザインを調整
最後に、このボタンの表示位置や、デザインを調整するCSSを作成して追加します。また、wpd_getlinktxは初めは非表示状態でなければ行けませんので、display:noneが指定してある必要があります。
CSSのコードは下記のように記載しました。
<style>
#wpd_getlinktx {
width: 300px;
height: 170px;
padding: 15px;
background: white;
border: 1px solid #ccc;
display: none;
}
#wpd_getlink {
border: none;
bottom: -4px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 1px 12px;
-webkit-box-shadow: 0 1px 1px #fff;
-moz-box-shadow: 0 1px 1px #fff;
box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3);
background-color: #e8e8e8;
}
#wpd_getlink:before,
#wpd_getlink:after {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
</style>
プラグインの完成コード
プラグインの完成コードは下記のような感じです。このままコピペされて、phpファイルを作り、wp-content/pluginsフォルダにアップロードし、管理画面のプラグイン→より有効化されれば動作しますので、良かったらあなたのワードプレスサイトにもご自由にお使いください（再配布はされないようにお願いいたします）。
<?php
/**
* @package WPD Post Link Maker
* @version 1.0
*/
/*
Plugin Name: WPD Post Link Maker
Description: Adds short link maker to a post
Author: WP Doctor
Author URI: https://wp-doctor.jp/
Version: 1.0
*/
add_filter('the_content','post_shortlink');
function post_shortlink($content = '') {
global $post;
if(is_single()) {
$slink = "
<style>
#wpd_getlinktx {
width: 300px;
height: 170px;
padding: 15px;
background: white;
border: 1px solid #ccc;
display: none
}
#wpd_getlink {
border: none;
bottom: -4px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 1px 12px;
-webkit-box-shadow: 0 1px 1px #fff;
-moz-box-shadow: 0 1px 1px #fff;
box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3);
background-color: #e8e8e8;
}
#wpd_getlink:before,
#wpd_getlink:after {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#wpd_shortlinkmaker {
font-size: 12px;
float: right;
margin-top: -34px
}
</style>
<div id='wpd_shortlinkmaker'>
<button id='wpd_getlink' onClick='showwpdlink()'><i class='icon-pencil'></i> この記事のショートリンクを取得 </button>
<div id='wpd_getlinktx'><b>下のリンクをコピーされてください</b>
<div style='float:right'><a href='javascript:void(0)' onClick='hidewpdlink()'>X</a>
</div>
<hr style='margin:0px;border:solid 1px #ddd'>
<br>".htmlentities("<a href='".get_home_url()."/?p=".$post->ID."' target='_blank'>".get_the_title())."</a>
</div>
</div>
<script>
function showwpdlink() {
document.getElementById('wpd_getlink').style.display = 'none';
document.getElementById('wpd_getlinktx').style.display = 'block';
}
function hidewpdlink() {
document.getElementById('wpd_getlink').style.display = 'block';
document.getElementById('wpd_getlinktx').style.display = 'none';
}
</script>";
return $slink.$content;
} else {
return $content;
}
}
?>
