WordPressでイベントカレンダー(改)。

By エックン on 2012.10.18 Thu - 14:49  |   Facebook

[my_get_calendar]

WordPressのget_calendar()を使ってイベントカレンダー的にエントリータイトルを表示する方法として「WordPressでイベントカレンダー」を参照にしたのだけどもWordPressの3.4.2だと動かなかった。

だ〜か〜ら〜。

get_calendar()のコードをちょびっと修正してプラグインにしてみた。けどメンテナンスは一切しません。つーかコードをテーマのfunctions.phpに貼り付けてもらえば好いのだけどもわりかし長いのでね。

1. ココからファイルをダウンロード。
2. ファイルを/wp-content/plugins/にアップロード。
3. プラグインを有効化。
4. テーマに記載する場合、<?php my_get_calendar() ?>。
5. 投稿ページに記載する場合、[my_get_calendar]←半角。
6. <table>タグのIDはwp-my-calendarなのでCSSの調整は各自でっ!

via WordPressでイベントカレンダー  |  wpxtreme

In web  |   Tagged , , , ,

レスポンシブ・(ウェブ・)デザインってば。

By エックン on 2012.06.28 Thu - 16:10  |   Facebook

レスポンシブ・(ウェブ・)デザインってさーデバイスのスクリーンサイズに対応した CSS をそれぞれマルチに割り当てれば好いのだ。とは想定していた。しかし jQuery でやるんか?PHP でやるんか?と悩んでいたのだけども。CSS (HTML) のみでできるんか!?と想定外。

レスポンシブ・(ウェブ・)デザインって超ぉ簡単じゃんよ!って声高々に言ってみる。
ちょっくら試しに。

↓ CSS を読み込む際に media を以下のように指定するんだって。

<link rel=”stylesheet” media=”screen and (max-width: 65025px)” href=”pc.css”>
<link rel=”stylesheet” media=”screen and (max-width: 980px)” href=”980.css”>
<link rel=”stylesheet” media=”screen and (max-width: 800px)” href=”800.css”>
<link rel=”stylesheet” media=”screen and (max-width: 640px)” href=”640.css”>
<link rel=”stylesheet” media=”screen and (max-width: 480px)” href=”480.css”>
<link rel=”stylesheet” media=”screen and (max-width: 320px)” href=”320.css”>

簡単しょ??つぎは jQuery Mobie を勉強せねばね。

-> DEMO

追記:
ついでに云うと、各サイズにしてブラウズしてくれる便利サイト。レスポンシブピクセル?

In web  |   Tagged , , , , ,

WordPressでログイン認証の振り分け。

By エックン on 2011.11.12 Sat - 13:11  |   Facebook

WordPressのちょっと機能追加でわざわざテスト環境作るの面倒。だからライブ環境でテストする時に使える、ユーザーログインした状態の時だけ表示するようにする振り分けっ。

<?php
    $current_user = wp_get_current_user();
    if ( $current_user->ID != “0” ) {
        echo “ログイン中”;
    }
?>

これ会員制サイト、メンバーサイトとかで使えそう。

<?php
    $current_user = wp_get_current_user();
    if ( $current_user->ID == “0” ) {
        echo “ログインして下さい。”;
    } else {
        echo “ログイン中”;
    }
?>

via Function Reference/wp get current user « WordPress Codex

In web  |   Tagged , , , , ,

でけた。

By エックン on 2011.10.28 Fri - 18:05  |   Facebook

Ver 1.0 (2004 – 2008) ::Kellogg::
Ver 2.5.3 (2008 – 2011) ekkun.com

で、3 年ぶりに Ver 3.0 (3.0.4) ekkun.com L をリリース。
まー最小限(least)でのリニューアルってことで。
デザインテーマのモザイク、WIDTH 600PXを踏襲しつつ HTML5 + CSS3 (微妙に) + jQuery 化。

※ 作ってる時点で飽きてたので大幅な見直しが必要だ。

H1の神業。

By エックン on 2011.09.15 Thu - 23:42  |   Facebook

SEO とか SEM とかまだ言ってるんですよ。もうね、アホかと。バカかと。お前らな、SEO とか SEM とかで普段自分でサイト作ってないのにほざいてんじゃねーよ、ボケが。SEO学会?統SEO教会?SEO福の科学?宗教かっつーの。

数年前まで HTML の <H1> タグのテキストを画像置換えで CSS の text-indent: -9999px; や display: none; がスパム云々で使う使わないが話題になっていたけど、この期に及んでまだ text-indent: -9999px; で頭悩ますとは、、って事で SEO とか SEM とかの情報は宗教的な話なので、ここでは単に <H1> タグの神業をご紹介っ。

Gmail
[ Gmail 様 ]

– HTML

<h1 class=”ce” role=”banner”>Gmail Logo</h1>
<div id=”:rl” class=”GcwpPb-VArq Rgky9″ title=”Gmail by Google” role=”link” idlink=”” style=”background-image: url(“images/2/5/logo4.png”); background-position: left top; background-repeat: no-repeat;”></div>

– CSS

.ce {
    height: 9px;
    left: 0;
    position: absolute;
    top: -10000px;
}

あの Google 様はさすがに <H1> に <IMG> というのが基本なのだが Gmail の新レイアウトで!まさかの <H1> が position で -10000px もの彼方に雲隠れ!

livedoor
[ livedoor 様 ]

– HTML

<h1 id=”logo”>
    <a onclick=”_gaq.push([‘_trackEvent’, ‘PC_ヘッダー’, ‘ロゴ’,”]);” title=”livedoor” href=”/r/logo”>
        <span>livedoor</span>
    </a>
</h1>

– CSS

div.title-outer-2 h1#logo span {
    display: none;
}

livedoor 様は <H1> の <A> の入れ子で <SPAN> を秘技 display: none;!しかし <A> の onclick が何をしているのかが気になる、、

Facebook
[ Facebook 様 ]

– HTML

<h1 id=”pageLogo”>
    <a title=”ホーム” href=”http://www.facebook.com/”></a>
</h1>

– CSS

#pageLogo a {
    background-color: #3B5998;
    background-image: url(“http://static.ak.fbcdn.net/rsrc.php/v1/yb/r/Au6ko5gyOOb.png”);
    background-position: -104px -235px;
    background-repeat: no-repeat;
    display: block;
    height: 31px;
    width: 103px;
}

Facebook 様はよもやの <A> タグに何も入れず title の属性のみ。さすがです。そんなのアリなの??

Twitter
[ Twitter 様 ]

– HTML

<div id=”logo”>
    <a href=”/”>Twitter</a>
</div>

– CSS

#logo a {
    background: url(“../img/twitter_logo_right.png”) no-repeat scroll 20px 9px transparent;
    color: #FFFFFF;
    display: block;
    height: 40px;
    margin-right: 5px;
    outline: medium none;
    text-indent: -9999px;
    width: 140px;
}

そもそも <H1> を使ってない!!なんでー!?!?

mixi
[ mixi 様 ]

– HTML

<h1>
    <a id=”pagetop” href=”http://mixi.jp/home.pl?from=h_logo”>
        <img width=”72″ height=”30″ alt=”mixi” src=”http://img.mixi.net/img/basic/common/mixi_logo_large001.gif”>
    </a>
</h1>

– CSS

#headerArea div.headerLogo a {
    display: block;
    height: 30px;
    overflow: hidden;
    text-indent: -9999px;
}

最近ロゴを変更した mixi 様はデコレーションがあるせいか、<IMG> タグを隠してからの重ね画像 2 枚使い。

Spotify
[ Spotify 様 ]

– HTML

<a href=”/int/”>Spotify</a>

– CSS

#header a.logo {
    background-position: -250px -40px;
    display: block;
    height: 76px;
    margin-bottom: 8px;
    text-indent: -999em;
    width: 76px;
}

話題のスポティファイ様はそもそも <H1> タグなしから〜の〜?? <A> タグ text-indent マイナスインデント〜。ぽいぽいぽいぽぽいぽいぽぴ〜♪

30days Album
[ 30days Album 様 ]

– HTML

<h1>
    <a href=”http://30d.jp/”>30days Album&trade;</a>
</h1>

– CSS

.logo h1 a {
    background: url(“/images/common/png.png”) no-repeat scroll 0 0 transparent;
    display: block;
    font-size: 0;
    height: 60px;
    text-indent: -7878px;
    width: 180px;
}

マイナーだけど神がかりすぐるので紹介。 ペパボの 30days 様はらしいコーディングで text-indent マイナスインデントなのに遊び心満載。text-indent: -7878px; なんとせんだみつおのナハナハ!!

定番は <H1> タグに <IMG> タグで画像を配置するんだけど、ムーブメントは HTML 5 で <H1> タグに囚われない俺流なコーディングが主流な感じがしてきたね。その中でも Apple や gree ですら相変わらずにマイナスインデントだし結局はテキストを隠すのには変わらない。最初からコンテンツの質、量、更新頻度で検索の順位が変動するものを、人為的に変えることなんかできない訳!それがダメなら広告出せば好いだろっ。あん??
マークアップエンジニアは日々宗教なヤシたちと闘いつつデザインやテクニックやオモロなことを駆使してコーディングをしているのですYO!

In web  |   Tagged , , , , , ,

埋め込みGoogleマップをdisplay: none;にすると座標がズレる件。

By エックン on 2011.08.18 Thu - 11:28  |   Facebook

DEMO を見てもらうと分かりやすいのだけど、埋め込み Google マップを jQuery などでタブ化して複数枚を埋め込むと何故か座標がズレる。
その原因が Javascript でタブとかモーダルを使用する際、ブロックを隠すために併用する CSS の display: none であるらしい。※定かではない
ってことは display: none で隠すのはブロックだけにして、地図を表示する箇所は Javascript で 1 回 1 回読み込めば好いと言うことらしい。

方法 (1): iFrame の要素 REL に URL を埋込み、クリックファンクションで REL -> SRC に変換する
方法 (2): クリックファンクションで HTML を読み込んで表示する

どちらもズレなくなった。

DEMO

via 埋め込みGoogle マップの座標がズレる場合のメモ。 – ゆず日記
via jQuery UI TabsにGoogleMap埋め込むと表示位置ズレる | 世田谷のエンジニア ブログ

In web  |   Tagged , , , , , ,

SimplePieでいこう。

By エックン on 2011.06.13 Mon - 19:56  |   Facebook

WordPress で Magpie RSS (PHP RSS Parser) の fetch_rss が非推奨らしいのを最近知って、急遽 SimplePie の fetch_feed を試してみたッ。で、SimplePie のちょっとしたサンプルを覚書で。※ WordPress での使い方は ggr カス。

( 1 ) SimplePie ライブラリをダウンロード

( 2 ) /cache/ ディレクトリをパーミッション777程度で用意。←これないと怒られる!

( 3 ) ライブラリを読み込んで以下の通りに XML を書き出す。

( 4 ) このライブラリも 2009年7月で更新が止まってる、、
使うか使わないかはあなた次第ッ!

【参考】SimplePie – PukiWiki

<?php
    // SimplePie.inc を読み込む
    require_once(‘./simplepie.inc’);

    // デフォルトオプション
    $feed = new SimplePie();

    // フィードにアクセス
    $feed->set_feed_url(‘http://www.ekkun.com/feed’);

    // SimplePie を起動
    $feed->init();
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Sample SimplePie Page</title>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
</head>
<body>
    <div class=”header”>
        <h1><a href=”<?php echo $feed->get_permalink(); ?>”><?php echo $feed->get_title(); ?></a></h1>
        <p><?php echo $feed->get_description(); ?></p>
    </div>
<ul>
<?php foreach ($feed->get_items() as $item): ?>
    <li>
        <h2><a href=”<?php echo $item->get_permalink(); ?>”><?php echo $item->get_title(); ?></a></h2>
        <p><?php echo $item->get_description(); ?></p>
        <p><small>Date: <?php echo $item->get_date(‘Y/m/d – H:i’); ?></small></p>
    </li>
<?php endforeach; ?>
</ul>
</body>
</html>

Demo

In web  |   Tagged , , , , ,
Loading..