(記事内リンクにPR含む場合があります)

【WordPress】はじめてのプラグイン作成方法!スマホ対応の内部リンクを共有

スマホ見て喜ぶ女性 WordPressカスタマイズ

スマホ見て喜ぶ女性

昨日はじめてWordPressのショートコード作成方法を記事にしました。まさかその翌日にプラグインを作成することになるとは思ってもなかったです。今回は向上心というよりもスマホ携帯に対応するためです。

ゆめぴょんです。こんちはっ(^^)/

昨日作った内部リンク装飾の、ショートコード作成&設置方法についての記事です。

WordPressショートコードのデメリット

あまりにも簡単にショートコードを作成&設置できてうれしかったので何度も記事を表示して確認しました。ただしPCやMacで。ところがスマホで見るとうまく表示されないことが発覚!

あせっていろいろ調べてみました。原因は、スマホ用にブログを表示してくれるプラグイン「WPtouch」が「functions.php」を無視するからだとわかりました。つまりスマホではショートコードを実行してくれません。

スマホ対応プラグイン「WPtouch」の設置方法

スマホ用プラグイン「WPtouch」で実行する方法

結論から言うと「WPtouch」でプログラムを実行するにはショートコードではなく、WordPressプラグインとして作成する必要があります。

WordPressを導入してからいくつものプラグインを紹介してきました。PHPなのでいつか便利なプラグインを作って公開したいなと思ってましたが、まさかこんなに早く作ることになるとは。しかしその心配とは裏腹に簡単です!

WordPressプラグインの作成方法

まずはPHPで作ったプログラムを用意してください。私は昨日公開した「内部リンク装飾」のショートコードをそのまま利用します。手順は次のとおり。

  • プラグイン・フォルダの中にファイルを作成
  • ファイルにヘッダをつける
  • 昨日のショートコードをそのままコピーする
  • ここで超重要な注意点が2つ!
  • 作成したプラグインをWordPressに登録する
  • プラグインを有効化

◆このプラグインの成功例

装飾内部リンクのショートコード

プラグイン・フォルダの中にファイルを作成

まずは自分の作成するプラグイン名を半角英数字で考えて下さい。私は仮に「yumepyon_ilink」とします。この名称でPCローカル内にフォルダを作成し、その中に同じ名称のファイル「yumepyon_ilink.php」も作って下さい。

フォルダとファイルの名称は統一しなくても良いみたいだけど、最初なので同じにした方がエラー発生時に疑わなくて良いのでオススメします。

ファイルにヘッダをつける

上で作った空ファイルに次のようなヘッダを付けましょう。

Plugin Name: プラグイン名称
Plugin URI: プラグインURL
Description: プラグイン説明
Author: プラグインの製作者
Version: プラグインのバージョン
Author URI: 製作者のURL

昨日のショートコードをそのままコピーする

ヘッダの下にはPHPコードをコピーして下さい。今回は昨日公開のショートコードと同じものを貼り付けました。そしてファイルを保存します。

[php]
<?php
/*
Plugin Name: yumepyon_ilink
Plugin URI: http://wispyon.com
Description: 内部リンク装飾
Author: yumepyon
Version: ver 0.1
Author URI: http://wispyon.com
*/
function ilink_scode($u) {
if (isset($u[0]) && $u[0]) {
$url = $u[0];
$id = url_to_postid($url);
$title = esc_html(get_the_title($id));
}else{ return; }

if (has_post_thumbnail($id)) {
return sprintf(
‘<div class="linkbox"><a href="’. $url .’">’ . get_the_post_thumbnail($id,array(120,120),array("alt"=>$title, "class"=>"", "align"=>"left")) . ‘<p>’. $title .'</p></a><div class="nlsns"><div class="nlsns_hatebu"><a href="http://b.hatena.ne.jp/entry/’ . $url .’/" class="hatena-bookmark-button" data-hatena-bookmark-title="’ . $title . ‘" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"> <img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button_wo_al.js" charset="utf-8" async="async"></script></div>
<div class="nlsns_tw"><a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-via="yume_pyon" data-url="’ . $url .’/" data-text="’ . $title . ‘">ツイート</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></div>
<div class="nlsns_pocket"><a href="https://getpocket.com/save" class="pocket-btn" data-lang="en" data-save-url="’ . $url .’/" data-pocket-count="horizontal" data-pocket-align="left" >Pocket</a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script></div></div></div><br style="clear:both" />’ );
}else{ return; }
}
add_shortcode("interlink", "ilink_scode");
?>
[/php]

【超重要な注意点が2つ】失敗するとブログ真っ白

まず1つ目。プラグインと同じプログラムやショートコードを「functions.php」に書いてる場合、必ずそちらのコードを「削除」して「保存」してからこの先に進んで下さい。

次に2つ目。作成したプラグイン・ファイル(今回は「yumepyon_ilink.php」)の中身に「空行」つまり空っぽでの改行があるとエラーのもとになります。ただし<?php 〜 ?>の中の空行は問題ありません。

「functions.php」ファイルはWordPressで最も重要なファイルの1つなので、修正を加える前には必ずバックアップをとってくださいね。そして問題が起こったらすぐに元に戻してください。修正は自己責任でお願いします。

作成したプラグインをWordPressに登録する方法

以上でプラグイン作成は完了しました。次にWordPressへの登録です。

FTPソフト等を使って、WordPressフォルダの中の「wp-content」の中の「plugins」の中に上のフォルダごとコピーして下さい。たったこれだけです。

プラグインを有効化すれば完成!

あとはいつものように、WordPress管理画面の左メニュー「プラグイン」→「インストール済みプラグイン」を選んで、自分のプラグイン「yumepyon_ilink」を見つけて有効化してください。

実際に動作することを確認してください。はじめて自作のプラグインが動いた時は本当に感動ですね(^^)

今回の記事は次のブログをかなり参考にしました。

WordPressのショートコードをスマホでもPCと同じように表示させる方法

ゆめぴょんでした。ちゃおっ!

タイトルとURLをコピーしました