年齢や現在の西暦の自動更新にする設定方法

こんにちは。
Webテロリストです。

突然ですが、みなさんは誕生日を過ぎた後に、
ご自身のプロフィールに書いている年齢の更新作業をしていますか?

新年を迎えた後、ホームページやブログ下部にある
Copyright (C) の更新作業をしていますか??

結構していない人が多いのでは無いでしょうか?
サザエさん理論で一生歳をとらないならそれで問題無いですが…(笑)

とはいえ、年に一回の作業だし、面倒なのも事実です。
そしてなにより、忘れちゃいます www

でも、Copyrightが昔のままだったりすると、
「あれ?このサイト全然更新されていな…手入れされていない…」

今何歳?年齢を表示させてみよう!

例えば、
私は今年で
と表示させたいときは、

年齢のの部分を
下記の↓一行に置き換えて下さい。
[html]<script>age(19831231)</script>[/html]

ただし、これだけでは不十分なので、
ヘッドのmetaタグの中に
下記の↓一行を追加して下さい。
[html]<script type="text/javascript" src="http://webterro.com/data/js/age-1.0.js"></script>[/html]

ヘッドのmetaタグというのは…
WordPressで利用する場合は、
管理画面(ダッシュボード)から
外観 > テーマ編集 > ヘッダー(header.php)を開くと、
コードが表示され、その中に
[html]</head>[/html]
という一行があります。
その一つ前の行にコピペして挿入し、
「ファイルを更新」ボタンを押すだけでOKです!

今年は何年?西暦で表示させてみよう!

これは西暦で表示したい部分…
例えば、ここの↓
Copyright (C) 2013 – All Rights Reserved.

2014の部分を
[html]<script type="text/javascript" src="http://webterro.com/data/js/thisyear-1.0.js"></script>[/html]
にコピペして置換するだけで毎年自動更新されます!

WordPressのPing送信先 厳選20リスト [ 2014年2月版 ]

http://ping.freeblogranking.com/xmlrpc/
http://api.my.yahoo.com/RPC2
http://blog.goo.ne.jp/XMLRPC
http://blogstyle.jp/xmlrpc/
http://coreblog.org/ping/
http://jugem.jp/?mode=NEWENTRY
http://rpc.blogrolling.com/pinger/
http://rpc.pingomatic.com/
http://rpc.technorati.com/rpc/ping
http://rpc.weblogs.com/rpc2
http://ping.amagle.com/
http://ping.bloggers.jp/rpc/
http://ping.cocolog-nifty.com/xmlrpc
http://ping.exblog.jp/xmlrpc
http://ping.myblog.jp
http://ping.rootblog.com/rpc.php
http://ping.weblogalot.com/rpc.php
http://www.blogoole.com/ping/
http://www.blogpeople.net/servlet/weblogUpdates
http://www.weblogues.com/RPC/

WordPressのプチリニューアル

みなさんこんにちは。
Webテロリストです。

WordPressのデザインをチョットだけリニューアルしました。
作業時間はぶっ通し12時間 (**)

昨日は朝からずぅ〜〜〜とMacBookと睨めっこでした。

リニューアルする予定は無かったんですが、
急遽作業しなければいけなくなってしまって… orz

というのも、
僕のレンタルサーバーはもともとロリポップだったんですが、
エックスサーバーの評判が良いので、乗り換える予定だったんですよ。

で、乗り換えに先駆けて、
検証も兼ねて2~3ヶ月前からエックスサーバーは契約していて、
それっきり…。

重い腰を上げて、一昨日からサーバーの移行作業を始めたんです。

━━━━━━━━
が、、、しかし!
━━━━━━━━

僕のWordPressはチョット特殊な構造になっていて、
メインのWordPressの中にサブのWordPressを埋め込むという
なんとも面倒くさい仕様になっていて、
一般的な移行手順で作業してもうまく移行できなくて、
イロイロ試行錯誤したんですが、

━━━
断念!
━━━

作りなおした方が早いかも…。

という結論に…。

中途半端に作業が進んでしまっていて、
ロリポップにあったWordPressは表示されなくなっていて、
エックスサーバーに移行したWordPressも表示できない!

という緊急事態に陥りまして、
急遽突貫工事をすることになったわけです… (**)

さすがの僕も、昨日の夜は
「もうMacを触りたくないなぁ…」
って思うほどクタクタになってました f(^^;)

まぁ、今思えば、良い経験ができたなぁって思いますが (^^)

昨日、僕のWordPressに訪れてくれた方には申し訳ない事をしました…。
スミマセンでした。
この場をかりてお詫び申し上げます m(-_-)m

WordPressのグローバルナビをオリジナルカスタムする方法 │ テロコン3分ハッキング Vol.004

みなさん、こんにちは。
Webテロリストです。

今回は標準の設定では固定ページが
動的に追加されていくだけのグローバルメニューを
固定された任意のページへリンクさせる方法を解説しています。

任意のページへリンクさせることによって、
グローバルナビにご自身のTwitterやFacebookなどのSNSへのリンクや、
LP(ランディングページ)へのリンク、
カテゴリーを設定することで、
メルマガのバックナンバー一覧へのリンクなどをする事が出来ます。

WP-Cumulusを使ってWordPressのタグを3Dアニメーションにする方法 │ テロコン3分ハッキング Vol.003

みなさん、こんにちは。
Webテロリストです。

さて、今回は「WP-Cumulus」というプラグインを使用して、
WordPressのタグを3Dアニメーションで表示させる方法を解説したいと思います。

また「WP-Cumulus」と一緒に必要な「Exec-PHP」と
「WP-Cumulus」を日本語表示に対応させる方法も合わせて解説しています。

■必要なプラグイン
WP-Cumulus
Exec-PHP

■日本語化ファイルのダウンロード先
http://www.joomler.net/download/131-wordpress/890-wordpress-wp-cumulus-49kb.html

■PHPソース
[php]
<div class=”book”>
<?php wp_cumulus_insert(); ?>
</div>
[/php]

賢威6.1 記事末尾のコメントフォームを消す方法 │ テロコン3分ハッキング Vol.002

みなさん、こんにちは。
Webテロリストです。

今回は、賢威6.1の記事の後ろに
毎回入ってしまうコメント欄を消す方法を解説致します。

使い方次第かとは思いますが、
コメントフォームがあると、いかにも「ブログ」です!
って感じになってしまうので、WordPressを「ブログ」ではなく
「ホームページ」のように見せたい場合は、

コメントフォームを消すことで
「ブログ」なのに「ホームページ」っぽく見せる事ができます。

賢威5.0 記事タイトル画像のアイコンを変更しよう! │ テロコン3分ハッキング Vol.001

みなさんこんばんは。
Webテロリストです。

新企画始めます。

題して!
【テロコン3分ハッキング】(*・∀・*)

記念すべき第一回目の放送のテーマは
「賢威5.0 記事タイトル画像のアイコンを変更しよう!」です。

3分ハッキングとは言いつつも、
3分で収まることは無いでしょう(笑)

初回は約10分の超大作です www

それではこちらをどうぞ!

テロコン3分ハッキング Vol.001「賢威5.0 記事タイトル画像のアイコンを変更しよう!

URLとディレクトリ(フォルダー)の関係

みなさんこんにちは。
Webテロリストです。

今日はURLとディレクトリの関係について
ご説明したいと思います。

そんなことは知っている!

って方も多いかもしれませんが、
ココを抑えておかないと、
今後テンプレートのカスタムをしたい!
って思っても、

そもそも画像の場所が分からない!

なんてことになりかねないので、
再確認したいと思います。

例えば、CyberduckなどのFTPソフトで、
レンタルサーバーの中を除くと、
こんな感じになっていて、

Cyberduckでレンタルサーバーにアクセスしたときのイメージ
Cyberduckでレンタルサーバーにアクセスしたときのイメージ

MacのFinderでフォルダを開いているのと同じように、
いくつかのフォルダが並んでますよね?
(※Cyberduckに関してはこちらの記事を参照して下さい。)

サーバーとは言え要はパソコンなので、
内部では大容量HDDを契約者(レンタルサーバーの入居者)単位で、
ディレクトリ(フォルダ)を作って、
私達契約者は自分に割り当てられたディレクトリの中に
データをアップロードします。

ディレクトリのツリー構造(階層)イメージ
ディレクトリのツリー構造(階層)イメージ

すると、サーバーはそのディレクトリ内の
データをインターネットに公開してくれます。

それを踏まえて…

では「http://webterro.com/terrocon/abc/img/photo01.jpg」の「photo01.jpg」は
サーバー内のどこのディレクトリに入っているか分かりますか?

実はURLの「/(スラッシュ)」と「/(スラッシュ)」の間はディレクトリの名前で、
最後がそこにあるファイルのファイル名なんです。
 こんな感じ。→ ●●ディレクトリ/▲▲ディレクトリ/■■ディレクトリ/★★画像.jpg

画像にすると、こんな感じ↓

ディレクトリのツリー構造(階層)とURLの関係イメージ
ディレクトリのツリー構造(階層)とURLの関係イメージ

で、最後に一つ注意しなければいけない点を
説明したいと思います。

上の図でいうところの「webterro.com」ディレクトリは
契約しているレンタルサーバーによって
若干階層の構造が異なっています。

この記事の読者さんは
エックスサーバーを使っている人が多いと思いますが、
エックスサーバーはチョット特殊な構造になっていて、

「http://webterro.com/terrocon/abc/img/photo01.jpg」を例にとると、

「http://webterro.com/terrocon/abc/img/photo01.jpg」の赤文字部分は
サーバー内部では
「/webterro.com/public_html/terrocon/abc/img/photo01.jpg」となります。

なので、あなたが「●●●.com」という独自ドメインでWordPressを使っていて、
エックスサーバーを契約していたら、
「/●●●.com/public_html/となります。

なので「http://●●●.com/photo01.jpg」って感じで画像をアップロードしたければ、
「/●●●.com/public_html/」の中に「photo01.jpg」って画像をアップロードして下さい。

そうすると「http://●●●.com/photo01.jpg」ってURLで画像が表示されるようになります。

エックスサーバーのポイントは、
「●●●.com」=「/●●●.com/public_html/」です!

それでは、今回も最後までありがとうございました!

クリックするとポワァ〜ンと波紋が広がるjQuery「pointer.js」の実装方法

みなさんこんにちは。
小野寺@Webテロリストです。

さて、前回はjQueryの基礎について解説いたしましたが、
今回はクリックポワァ〜ンを例に、
実際にjQueryをあなたのWebサイト(WordPress)に設置する方法を解説したいと思います。

クリックポワァ〜ンの設計図(Javaファイル)は
nejimaki-actさんが無料で配布してくれています。

その設計図には、
「jQueryに含まれる”このパーツ”と”このパーツ”をこんな感じで組み立てて表示させてね!」って書かれています。

なので、まずはそもそもパーツ倉庫のjQueryがどこに有るか?を教えてあげなければいけません。

方法は2種類あって、
[ 1 ] 本家のjQueryサイトからダウンロードして自分のサーバーにアップロード。
そして、そのURLを教える方法
[ 2 ] 天下のGoogle先生や本家jQueryなどが皆さんのために
用意してくれているjQueryファイルのURLを教える方法。
※Google先生はロボットなんで、どんなに褒めてもSEOで便宜は図ってくれません(笑)

手軽に実装できるので、僕はGoogle派です。
Googleが提供するjQueryファイルはココ↓にあります。
//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js

この場所をあなたのWebサイトのhead内で告知するわけです。
告知は、こんな感じ↓で書きます。
<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script>

で、次は設計図を広げましょう。

設計図は自分のサーバーにアップロードしなければいけないので、
nejimaki-actさんからpointer.jsをダウンロード(クリックポワ〜ンの設計図)して下さい。

↑のリンクをクリックすると頭が痛くなりそうな文字の羅列が表示されると思います。
それを全選択(command + a)して、コピー(command + c)。
で、テキストエディットとかmiにペースト(command + v)して、
「pointer.js」ってファイル名で保存して下さい。

そしたら、そのファイルをCyberduckとかを使って、
あなたのサーバーの任意の場所にアップロードしてそのURLを告知します。

告知はjQueryファイル同様、こんな感じ↓で書きます。

まとめるとこんな感じ↓。これが基本的な書き方です。
<head>
<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script>
<script type=”text/javascript” src=”あなたがアップロードしたURL/pointer.js”></script>
</head>

たったこれだけです(笑)

このページをご覧の方は「WordPress + 賢威」の組み合わせが多いと思いますので、
その場合は、「ダッシュボード>外観>テーマ編集」と進み、
右サイドバー「テンプレート」内の「ヘッダー(header.php)」をクリック。

表示された文字(ソース)を上から順に追っていくと、
</head>って行が出てくると思います。
その一つ前の行に例の2行挿入します。

こんな感じ↓
<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script>
<script type=”text/javascript” src=”あなたがアップロードしたURL/pointer.js”></script>
</head>
で、「ファイルを更新」ボタンを押すだけで実装完了です!

ちなみに「pointer.js」をちょっと書き換えるだけで、
カスタムもできます (*´・ω・)ノ

26行目:var x = e.pageX-5;
27行目:var y = e.pageY-5;

このxとyの値(-5)を変えると、ポワァ〜ンの中心点が変わります。

8行目:size : 80,
9行目:spd : 300, /*速さ*/
10行目:color : “#ccc” /*色*/

このsizeの値(80)を変えるとポワァ〜ンの大きさが変わります。
spdの値(300)を変えるとポワァ〜ンのスピードが変わります。
colorの値(300)を変えるとポワァ〜ンの色が変わります。

いろいろ試して、セミオリジナルのポワァ〜ンを実装してみて下さいね!

それでは今回も最後までありがとうございました!

jQueryってなに?

みなさんこんばんは。
小野寺@Webテロリストです。

今回はjQueryの基礎について
解説したいと思います。

そもそもjQueryってなにかというと、
JavaScriptっていう言語で書かれた、
プログラムの一種です。

jQueryにはホームページや
ブログをデコレーションするための
「パーツ」が数多く含まれています。

昔、ガラケー最盛期に
「デコメール」って合ったの
覚えてますか?

あれって、
文字を光らせたり、
画像を動かしたり、
色々なテンプレートが
用意されていて、

それを自分で選んで組み合わせて
自分なりのデコメを作りますよね?

それと同じように、
・クリックすると、波紋がポワァ〜ンと広がるアレとか、
・このページ→webterro.comの右側のサイドバー下方の「Terrocon」バナーとか、

実際に動画で見たほうが分かりやすいです(約2分)↓

http://youtu.be/sZ0S-RmMngo

こういったインタラクティブなアクションを行うために必要な膨大なパーツが
jQuery(※1)の中に含まれています。

そのパーツを自分で組み立てて、
完全オリジナルなアクションを設定することもできますが、
それは難しすぎて、僕もできません(汗)

でも、世の中にはそれができる人が沢山いて、
作ったアクションの設計図を無料配布(※2)している人が多いです。

クリックポワァ〜ンなんかも無料配布されていて、
設計図さえあれば、誰でも簡単に利用する事ができます。

次の記事では、クリックポワァ〜ンを例に、
無料配布されている設計図の使い方(jQueryの実装方法)を解説します。
その時、(※1)のjQueryと(※2)の無料配布されている設計図にも触れるので、
しっかり覚えておいて下さいね。

それでは、今回も最後までありがとうございました。