Flatpress のちょっとした（ピコ）メモ
- プレグインを作成する際のデバッグ方法として、日本語環境の存在有無によっては正常に動かないことがある。この理由は、言語設定のパラメータとして、lang.en-us.php、lang.ja-jp.php が選択される訳であるが、言語設定が English であると lang.ja-jp.php は読み込まれないからである。
- 日本語可する際の手順して、日本語パックのデータをすべて上書きすればよいのであるが、setup/ 以下はしない方が感じがよかった。つまり、標準インストール後において日本語可パックをオーバーライトする。
- 単純実験として初期インストールをする場合には、日付修正追加を忘れているとカレンダーなどの日付が狂うので注意する。
アナログ時計のプラグインを作成
だんだんとプラグインの作成方法が分かってきたので、どこにでもある「アナログ時計」を作成して見ました。実装はプラグイン形式になっています。まずは、サンプルとして設置した様子をお見せいたします。
このアナログ時計はすでに公開している「美人時計」ではちょっとカジュアル過ぎると思われた方にはよろしいのではないでしょうか。なお、時計部分の表示については後述するように、インターネット上にサンプルが豊富にあるソースプログラム(Javascript)をコピー＆ペーストすれば、お好みのデザインにカスタマイズすることができます。
さて、このプログラムは本サイトの「アナログ時計プラグイン」からダウンロードできますのでこれをプラグインディレクトリ（/fp-pluginz/)配下に解凍して有効化してください。
このプラグインもウィジェット化での表示されますので、好みの場所に表示されるように設定しておきます。下図で clockjp が読めますが、例としては右パネルの最上位に表示させるようしています。
この時計のカスタマイズはソースを修正すれば、どのようにもなる訳ですが、ページのデザインに直接関係する大きさだけは簡単に調整できるようにしました。管理エリアの本プラグイン設定で大きさ（表示直径）を指定できます。
このアナログ時計のソースは下記に示すサイト（https://www.softel.co.jp/blogs/tech/archives/3914）から借用しています。また、秒針については先っぽに赤丸を付加して若干ですがデザイン性を向上させています。
アナログ時計部分のソースはダウンロードされたものを見ていただくとして、プラグインとして javascript を吐き出しているところを下記に示しておきます。
plugin.clockjs.php
<?php
/*
Plugin Name: javascript clock
Version: 0.9
Plugin URI: http://flatpress.info/
Type: Widget
Description: "Javascript Cloclk FYI=https://www.softel.co.jp/blogs/tech/archives/3914"
Author: Flatpress.info
Author URI: http://flatpress.info
*/
function plugin_clockjs_script() {
global $clockprogram;
$clockprogram = array();
$lang = lang_load('plugin:clockjs');
$clockprogram['subject'] = $lang['plugin']['clockjs']['subject'];
include 'source.php';
$h=$clockprogram['data'];
echo '<script type="text/javascript">' . $h . '</script>';
echo '<style type="text/css"> #clockjs { display: block; margin-left: auto; margin-right: auto;} </style>';
$c = plugin_geturl('clockjs').'res/css/clockjs.css';
echo '<link rel="stylesheet" type="text/css" href="'.$c."\" />\n";
return;
}
add_action('wp_head', 'plugin_clockjs_script');
function plugin_clockjs_widget() {
$lang = lang_load('plugin:clockjs');
$widget = array();
$widget['subject'] = $lang['plugin']['clockjs']['subject'];
$width = plugin_getoptions('clockjs');
$w = $h = $width['clockjs'];
$widget['content'] = '<canvas id="clockjs" width="'. $w . '" height="' . $h . '"></canvas>';
return $widget;
}
register_widget('clockjs', 'clockjs', 'plugin_clockjs_widget');
if (class_exists('AdminPanelAction')){
class admin_plugin_clockjs extends AdminPanelAction {
function setup() {
$this->smarty->assign('admin_resource', "plugin:clockjs/admin.plugin.clockjs");
$bc_config = plugin_getoptions('clockjs');
if(!$bc_config['clockjs']) {
$clockjs = "180";
plugin_addoption('clockjs', 'clockjs', $clockjs);
plugin_saveoptions('clockjs');
}
}
function main() {
$bc_config = plugin_getoptions('clockjs');
$this->smarty->assign('bc_config', $bc_config);
}
function onsubmit() {
if ($_POST['bc-clockjs']){
$clockjs = $_POST['bc-clockjs'];
plugin_addoption('clockjs', 'clockjs', $clockjs);
plugin_saveoptions('clockjs');
$this->smarty->assign('success', 1);
} else {
$this->smarty->assign('success', -1);
}
return 2;
}
}
admin_addpanelaction('plugin', 'clockjs', true);
}
?>
リンク先の文字表示がマウスオーバーで斜めになっちゃうプラウグイン
変わったサイト作りがお好きなあなた、"マウスオーバーでリンク文字が斜めっちゃうプラグイン"はいかがですか？ CSS に関するサイトを眺めていたら、前述した機能を実現する CSS 記述の例が載ってました。まあ、自己フレンドリーかも知れませんが、他人には煩い感じを与える可能性も否定できませんけど。本サイトで紹介している Flatpress の情報は完全に自分のための情報を整理して備忘するのが目的です。なので、動きが欲しいと思った一部分の表示領域だけがそうなるようにしましょうかね。
さて、メイン表示部分は通常で、ヘッダーとメニュー部分のリンク表示文字がマウスオーバーで文字が斜めになる実例をお見せしましょう。
このプラグインを利用したい方は、本サイトからダウンロードして fp-plugins/ 配下に解凍して設置し、同プラグインを有効化してください。
どの部分のリンク文字をマウスオーバーで斜めにするか
ご存じのようにホームページの領域は CSS によって修飾されています。Flatpress においてもヘッダー部分、メニュー部分、メイン表示部分などについては、それぞれ、#head, #column, #main のようにユニークなIDが付与されています。そこでこの文字を下記のように設定してもらえば、その指定領域だけ、このプラグインが動作対象とするようにできます。
その他の固有部分だけ動作させたい場合は、ソースを改造して対応してください。以下が主要プログラムとなっています。plugin.tiltlink.php
<?php
/*
Plugin Name: Tilt Link
Version: 0.8
Plugin URI: http://flatpress.info/
Type: CSS
Description: Tilt Link line
Author: Flatpress.info
Author URI: http://flatpress.info
*/
function plugin_tiltlink_css() {
global $tlcss;
$tlcss = array();
$lang = lang_load('plugin:tiltlink');
$tlcss['subject'] = $lang['plugin']['tiltlink']['subject'];
include 'tiltcss.php';
$h=$tlcss['css'];
echo '<style type="text/css"> <!-- ' . $h . ' --></style>';
return;
}
add_action('wp_head', 'plugin_tiltlink_css');
if (class_exists('AdminPanelAction')){
class admin_plugin_tiltlink extends AdminPanelAction {
function setup() {
$this->smarty->assign('admin_resource', "plugin:tiltlink/admin.plugin.tiltlink");
$bc_config = plugin_getoptions('tiltlink');
if(!$bc_config['tiltlink']) {
$tiltlink = "body";
plugin_addoption('tiltlink', 'tiltlink', $tiltlink);
plugin_saveoptions('tiltlink');
}
}
function main() {
$bc_config = plugin_getoptions('tiltlink');
$this->smarty->assign('bc_config', $bc_config);
}
function onsubmit() {
if ($_POST['bc-tiltlink']){
$tiltlink = $_POST['bc-tiltlink'];
plugin_addoption('tiltlink', 'tiltlink', $tiltlink);
plugin_saveoptions('tiltlink');
$this->smarty->assign('success', 1);
} else {
$this->smarty->assign('success', -1);
}
return 2;
}
}
admin_addpanelaction('plugin', 'tiltlink', true);
}
?>
tiltcss.php
<?php
global $tlcss;
$time = <<<_EOT1_
a {
display: inline-block;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
_EOT1_;
$rotate = <<<_EOT2_
a:hover {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
_EOT2_;
$div = plugin_getoptions('tiltlink');
$div = preg_split('/[\s]+/', $div['tiltlink'], -1, PREG_SPLIT_NO_EMPTY);
$tlcss['css'] = '';
foreach ($div as $key => $value) {
$tlcss['css'] .= $value . $time;
$tlcss['css'] .= "\n";
$tlcss['css'] .= $value . $rotate;
$tlcss['css'] .= "\n";
}
?>
アクセスカウンターのプラグインの作成
インターネットの黎明期の頃は、当然ながらホームページを所有し公開することにステータスが表れていました。今日ではホームページを持たないところにユニークさを見出すかも知れません。当時は、アクセスカウンター（ウェブカウンター）がホームページの目立つところに設置されて「あなたは○○○番目の訪問者です」などと表示されていたものです。しかしながら、このようなサイトを見かけることはめったになくなりました。
さて、今回はそのようなレトロ風なアクセスカウンターを作成してみたいと思います。実際に設置した様子を下に示します。
どうでしょうか、こんな感じです。先の記事である「ページビューのプラグイン」を利用すれば任意のページのアクセス集計を見ることは可能です。それに比してこのカウンターは１ページ分しか表示できません。通常はトップページへのアクセス数を表示することになるでしょう。しかし、検索エンジンで内部のコンテンツページに直接アクセスされた場合は、このトップページに設置されたアクセスカウンターは増加しないですね。ということで、このアクセスカウンターの意義は何なのだろうか、という疑問を持つのはまっとうなところです。ここでは気楽なアクセサリーの一つだと考えておきましょう。
どのページのアクセス数をカウントするのか
このプラグインをインストールすると「管理エリア」にアクセス数をカウントアップさせるページを指定できるようにしました。このサンプルでは[about]（上図のようなスタティックページ）を指定しているところです。これを特定のブログページにしたい場合には、ブラウザのURL表示から"?x="から後ろのIDをコピー＆ペーストしてください。その部分は例えば[entry:entry141010-150231]となります。こうするとそのページがカウントアップ対象となります。
設定の仕方については、まず、本プラグインを有効化します。
引き続いて、ウィジェットとして表示させるエリアを選択します。冒頭のサンプルでは説明上で目立つように上部にもってきてますが、厳かに一番したに持ってくるのもよいでしょう。
次に、どのページをカウントアップの対象にしたいのかを選択します。記事ページでなかった場合、すなわちスタティックページにしたいときには、下記の管理エリアの「ページ名」から選択することになります。
また、どのページがトップページとして表示されるのかについては、管理ページの「このウェブサイトのホームページ」で示されているものとなります。
プログラムについて
本プラグインをダウンロードして fp-plugins/ 配下で解凍してください。カウント画像用のデータも含まれています。
メインのソース部分を掲示しておきます。gif/ 以下の画像を変えればお好きなカウンタ画像に早変わりしますのでお試しください。
<?php
/*
Plugin Name: Web Counter
Plugin URI: http://flatpress.info
Description: Web Counter program
Version: 0.5
Author: Flatpres.info
Author URI: http://flatpress.info
*/
function plugin_webcounter_css() {
$h=plugin_geturl('webcounter').'res/css/webcounter.css';
echo '<link rel="stylesheet" type="text/css" href="'.$h."\" />\n";
}
add_action('wp_head', 'plugin_webcounter_css');
function plugin_webcounter_widget() {
$lang = lang_load('plugin:webcounter');
$widget = array();
$widget['subject'] = $lang['plugin']['webcounter']['subject'];
include 'webcounter.php';
return $widget;
}
register_widget('webcounter', 'webcounter', 'plugin_webcounter_widget');
if (class_exists('AdminPanelAction')){
class admin_plugin_webcounter extends AdminPanelAction {
function setup() {
$this->smarty->assign('admin_resource', "plugin:webcounter/admin.plugin.webcounter");
$bc_config = plugin_getoptions('webcounter');
if(!$bc_config['pageid']) {
$pageid = "Set pageID";
plugin_addoption('webcounter', 'pageid', $pageid);
plugin_saveoptions('webcounter');
}
}
function main() {
$bc_config = plugin_getoptions('webcounter');
$this->smarty->assign('bc_config', $bc_config);
}
function onsubmit() {
if ($_POST['bc-pageid']){
$pageid = $_POST['bc-pageid'];
plugin_addoption('webcounter', 'pageid', $pageid);
plugin_saveoptions('webcounter');
$this->smarty->assign('success', 1);
} else {
$this->smarty->assign('success', -1);
}
return 2;
}
}
admin_addpanelaction('plugin', 'webcounter', true);
}
?>
ちなみに、リセットしたい場合には fp-content/content/gcount.txt のファイルを削除してください。プラグイン実行時に再度、自動作成されます。