FlatPress.info

Information & blog

リンクの文字を虹色にきらきら表示させるプラグイン

このプラグインは下のようにリンク文字の上にマウスカーソルを乗せると虹色に文字色を変化させるためのものです。ちょっと面白い印象を受けますね。オリジナル(raimbowlink)の考案では、色の変化が常に連続して止まらないものでしたが、これでは少し煩わしいと感じまして、1秒程度で自動停止するように改造しています。リンク文字からマウスが離れると元の色に戻りますが、この自動停止でも元々の文字色に戻るようにしています。

rainbowlink2

例によって、インストール後にこのプラグインの有効化をしておきます。

rainbowlink-enable

プラグインプログラムのソースはこのような感じです。このプラグイン配下には jquery のスクリプトが収容されています。

<?php
/*
Plugin Name: RainbowLink
Plugin URI: http://flatpress.info                                                                                                       
Description: Change Color Link
Author: flatpress.info
Version: 0.5
Author URI: http://flatpress.info                                                                                                       
*/


function plugin_rainbowlink() {
?>
<!-- Rainbow Loaded by eggoez http://eg.goez.tk -->                                                                                     
<script>
var rate = 20; // Increase amount(The degree of the transmutation)
if (document.getElementById)
window.onerror=new Function("return true")
var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 255; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID
var cnt = 0;
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
// doRainbow
// This function begins to change a color.
function doRainbow(obj)
{
if (act == 0) {
act = 1;
cnt = 0;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
// stopRainbow
// This function stops to change a color.
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
// doRainbowAnchor
// This function begins to change a color. (of a anchor, automatically)
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
cnt = 0;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
// stopRainbowAnchor
// This function stops to change a color. (of a anchor, automatically)
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
// Mozilla_doRainbowAnchor(for Netscape6 and Mozilla browser)
// This function begins to change a color. (of a anchor, automatically)
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
cnt = 0;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
// Mozilla_stopRainbowAnchor(for Netscape6 and Mozilla browser)
// This function stops to change a color. (of a anchor, automatically)
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
// Change Color
// This function changes a color actually.
function ChangeColor()
{
if(cnt++ < 20) {
objActive.style.color = makeColor();
} else {
cnt = 21;
objActive.style.color = clrOrg;
}
}
// makeColor
// This function makes rainbow colors.
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
<!-- End Of Rainbow links. Thanks for Use :) -->
</script>
<?php
}
add_action('wp_footer', 'plugin_rainbowlink');
?> 

 補足として二つあります。

  1. このプラグインを有効にすると Widget 設定がマウスでできない症状がありました。Widget の表示場所を変更する際には、一旦、本プラグインを無効にして操作をすることにしています。
  2. このプラグインは rainbowlink というものを下地にしています。リンク部分にマウスカーソルが乗っている場合に、連続して文字色が変化する方がお好みであれば、そちらをインストールしてください。

 

 

ページをフェードインするプラグインの作成

デザインの観点から、記事内容のページが"ふわっと"表示されてくる作り方をしているサイトが見受けられます。これを実現するプラグインを作りましたので紹介します。以下にダウンロードから設置までを説明しておきます。

 

  1. プラグイン名が fadein というもので、fadein.zip を本サイトのここからダウンロードして fp-plugins の配下に解凍します。
  2. 例にならって、このプラグインを有効化します。
  3. 有効後は記事内容の表示全体がフェードインして表示されるようになります。

flatpress-fadein

 

 

プラグインの内容は次の通りです。"slow"という部分を任意の値にすれば、希望するフェードイン時間が設定できます。(このあたりの情報はネットで検索ください)

plugin.fadein.php

<?php
/*
Plugin Name: fadeIn
Plugin URI: http://www.flatpress.info/                                                                                                  
Description: Adds Fadein to FlatPress
Author: Faltpress.info
Version: 0.9
Author URI: http://www.flatpress.info/                                                                                                  
*/


function plugin_fadein_dispnone() {
$fflag1 = strstr($_SERVER['REQUEST_URI'], 'login.php?do=login');
$fflag2 = strstr($_SERVER['REQUEST_URI'], 'login.php?do=logout');
if($fflag1 || $fflag2) {
echo '<script type=text/javascript>$(\'head\').append( \'<style type="text/css">body {display:block;}\' );</script>';
} else {
echo '<script type=text/javascript>$(\'head\').append( \'<style type="text/css">body {display:none;}\' );</script>';
}
}


function plugin_fadein_fadein() {
echo '<script type=text/javascript src=' . PLUGINS_DIR . 'fadein/jquery/res/jquery-2.1.3.min.js></script>';
echo '<script type=text/javascript>$(document).ready(function() { $(\'body\').fadeIn("slow"); });</script>';
}


add_action('wp_footer', 'plugin_fadein_fadein');
add_action('wp_head', 'plugin_fadein_dispnone');
?> 

気になるところがひとつあって、本来は<body>タグの部分においてフェードインの javascript を起動すべきだと思うのですが、その部分へのadd_action の登録方法が不明でしたので、現状のようになっています。取り敢えず動作しているのでOKとしておきましょう。また、ログインとログアウトするシーケンスでは遅延しないようにしています。
以下がプラグインの有効化のスクリーンショットとなります。

fadein-enable

postview プラグインを利用する

このプラグインは投稿されたページの閲覧数をページの(標準では)下隅に表示させるために利用されます。インストールするとアクセス数を管理するフォルダとファイルが自動で作成されます。管理者が投稿ページを見た際にアクセス数が増えてはよろしくないので、ログイン状態ではアクセス数は加算されません。また、一覧で表示させる機能はもっていないので、そのためには別記事で紹介しているような追加ログラムを必要とします。また、デフォルトのプラグインになっているので、ダウンロード作業は不要です。

それでは、プラグインを有効にした時のスクリーンショットと、続いて、そのアクセス数がどのように見えるかを紹介しておきます。なお、一覧表として見たい場合には、「アクセス数の一覧」の記事を参考にしてください。

 

プラグインの有効化設定

postview-enable

アクセス数の見え方

postview-onPage

アクセス一覧ページを作る

アクセス数を把握するプラグインが標準でついています。これは postview というものです。FlatPress がブログで活用されることが想定されているの「投稿ページごとのアクセス数」であることから、ウエブカウンターとかではなく、この名称が付いているのだと思われます。これから説明する方法にて、下に示すような「アクセスページの一覧表」を作ることができました。

viewcounter-list

 

postview プラグインの動作

  1. 中身のソースを追いつつ、また実際の動作状況を確かめてみると、次のようになっています。
  2. 投稿ページブロックについてフックする
  3. 投稿IDのディレクトリが無ければ何もしない
  4. 投稿IDディレクトリがあればカウンターファイルの値を+1する
  5. ログインしている場合にはカウントアップしない
  6. URLが1ページ表示でないとカウントアップされない(投稿IDが特定できない)
  7. ログインでない状況ではIDディレクトリと管理ファイルを作成する
  8. 当該IDのページの view をセットする(テンプレートに表示)

 

そしてこれを有効にした状態でのサンプル表示はこのようになりました。

postview-sample

 

上記のサンプルは初期インストールのものなので、本サイトの記事を参考にされて改造されている方の場合は、以下の2点にご注意ください。

1、もし、この常時が出ない場合は、fp-interface/themes/leggero/entry-default.tpl において、その部分がコメントアウトされている可能性があります。 {if isset($views)}(<strong>{$views}</strong> views){/if} の部分が有効になっているかをお確かめください。

2、また、本サイトではログインしていないと、こうしたものが表示できない設定としているので、同様にこのテンプレートをチェックしてください。ログインしているときのみ表示される部分は{if $login_status == 'login'} から{/if} で囲まれた部分となります。

 

 それでは実際のスクリーンショットをみてみましょう。まずは、postview プラグインを有効にします。

postview-enable

本サイトのテンプレート(テーマ)で表示させた場合はこんな感じです。

postview-onPage

アクセスページの一覧表を表示するページを作る必要がありますが、いつも作成していては時間の無駄となります。そこで、固定ページ(static)を作る手順とし、先にインストールしたプラグインである inlinephp が活躍します。プログラムリストは下方でお示しします。この一覧表は表示する時点でコンテンツ全部を集計します。

viewcounter-edit

一覧表示をさせるプログラム(php)スクリプトです。inlinephp のタグである[exec],[/exec]を含めて入力をします。

 

[exec]

global $fpdb, $smarty;
$q = $fpdb->getQuery();
$calc = $q->single;
$q = new FPDB_Query(array('start'=>0, 'count'=>-1, 'fullparse'=>true), null);
$entry = array();
$widget = array();
$maxv = 0;
$maxw = 240; // maximum width for each image bar
$imgh = 8; // height of each image bar

while($q->hasMore()) {
    list($id, $e) = $q->getEntry();
    $dir = entry_dir($id);
    $f = $dir . '/view_counter' .EXT;
    $v = io_load_file($f);
    if ($v===false){
       $v = 0;
    }
    $subj = $e['subject'];
    $loc = BLOG_BASEURL . 'index.php?x=entry:' . $id;
    array_push($entry, array($subj, $v, $loc));
    $maxv = max($maxv, $v);
}

$viewlist = "";
$viewlist .= '<table style="table-layout: fixed;">';
foreach($entry as $k => $val) {
    $subj = $val[0];
    // $subj = substr($val[0], 0, 64);
    $v = $val[1];
    $w = 1 + round($v/$maxv*$maxw);
    $loc = $val[2];
    $fv = number_format($v);
if($fv == 0) continue;
    $viewlist .= '<tr><td style="text-align:right; border:0">' . '<a href="' . $loc . '">' . $subj . '</a>' . '</td><td style="border:0">' . '<img src="data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///6Cts////yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw==" width="' . $w . '" height="' . $imgh . '">' . '<span style="color:Silver;font-size:10pt;margin-left:4px;vertical-align:top;">' . $fv . '</span>' . '</td></tr>';
    }
$viewlist .= '</table>';
echo "$viewlist"; 

[/exec]

 

 

FlatPess 記事

Copyright c  flatpress.info 2015. All Rights Reserved.