BlogArts

「Evernoteリンク」の作成過程

昨日のエントリーで紹介したEvernoteリンクの作成方法について。

まず最初に考えたのは、「全ての記事を自分でチェックして、それをジャンル毎に分類し、リンクを貼っていく」というやり方。なかなか使い勝手の良いページができそうではありませんか。

しかし、あきらかに時間がかかりそうです。それに今後Evernoteについて書くたびに、そのページに修正を加えなければいけません。そうやって徐々に時間コストを積み上げていくのは、長期的な運用を前提とした場合あまり賢明な選択とはいえません。

すると、自動化です。

漠然と、Wordpressでphp書けばなんとかなるだろう、と考えました。

設置場所としては、こうした普通の更新ページよりも、固定ページの方がしっくりくるでしょう。作成すればヘッダーのリンクに自動的に追加されるのも魅力的です。

で、まず、固定ページのテンプレートを複数使い分けられるのかどうか。それが気になりました。

ユミンのブログ | WordPressで複数の固定(テンプレート)ページを使用する方法
わかりやすい解説ありがとうございます。

上の記事によると「可能」、とのこと。

PHPファイル作って、サーバーにアップすればOKのようです。とりあえず中の処理については考えずに、外殻だけのevernote.phpファイルを作成し、それをアップ。
※上のページで提示されているものをパクっただけのやつです。

どこにアップすればいいのか少し悩みましたが、「固定ページ」のテンプレートが入っているフォルダだろうとアタリを付けて、使用しているテーマのフォルダにアップ。

すると、無事認識された様子。

これで、固定ページのテンプレートが選択可能になりました。

あとは、自分が想定するイメージのphpコードを書けばOK。

が、ここからずいぶん詰まりました。壁にぶつかりまくりです。

イメージとしてはEvernoteタグが付いた記事のタイトルを(リンクとして)縦にずらずらと並べたものを想定していました。get_posts()を使えばOKかなと思っていたんですが、どうにもうまくいきません。

テンプレートタグ/get posts」(WordPress Codex日本語版)

を見ても、タグの扱いが書いていません。もしかして、タグが使えない?

いろいろググり漁って、query_posts() ならタグが使えそうな感じ。
※「テンプレートタグ/query posts」(WordPress Codex日本語版)

いろいろなサイトからコピペしてそれっぽいコードを作成。なんとか想定した表示ができました。

もしかしたら、本来的な使い方ではないのかもしれませんが、とりあえ表示ができたので個人的には満足です。

リンクを表示させている部分のコードはこんな感じ。

<ol reversed="reversed">
<?php query_posts('tag=evernote&posts_per_page=-1'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">
		<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></li></div>
	<?php endwhile; ?>
	<?php else : ?>
	<?php endif; ?>

	<?php wp_reset_query(); ?>
</ol>

番号付きリストを作る<ol>のreversed属性は、番号を逆順にするもの。普通だと上から1、2、3、・・・となるのですが、これを指定すると、最後の要素から1、2、3、・・・と番号が上がってきます。ただ、ブラウザの対応は少ないようなので、普通に1から始まって見えているかもしれません。まあ害はないですね。

と、ここまで書いて気がついたんですが、最初の段階、つまりquery_posts()で拾ってくるときに、順番をひっくり返しておけば<ol>のナンバリングと記事のナンバリングが一致しますね。ただ、これだと最新記事にアクセスするときに、とんでもなく下までページを送らなければいけない事態が発生します。

うむむ。

まあ、新しい記事はブログのTopからアクセスしてもらうとして、リストは古いモノから新しいものに並べておくとしましょう。

なので、こんな感じです。


<ol>
<?php query_posts('tag=evernote&posts_per_page=-1&order=ASC'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">
		<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></li></div>
	<?php endwhile; ?>
	<?php else : ?>
	<?php endif; ?>

	<?php wp_reset_query(); ?>
</ol>

という感じで出来たのが、「Evernoteリンク」です。昨日の時点では、上のコードでしたが、これを書いている間に下のバージョンに変更になりました。

同じことする人がいるかどうかはわかりませんが(きっといない)、とりあえず備忘録として。

▼Coming Soon:

Evernoteとアナログノートによる ハイブリッド発想術 (デジタル仕事術)
Evernoteとアナログノートによる ハイブリッド発想術 (デジタル仕事術) 倉下 忠憲

技術評論社 2012-06-30
売り上げランキング : 8929

Amazonで詳しく見る by G-Tools

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です