URLをリンクに変換するプラグインを使って、さらにラクをしよう!

前回の記事では子ページへのリンクを生成するプラグインを使って、サイトの制作でラクをしちゃおうぜみたいなテクニックをご紹介しました。

今回もよく似たテクニックですが、今度はサイト内の他のページへのURLをペタペタとコピペして ラクをしちゃおうぜというテクニックをご紹介します。

事例でご紹介しているサイトはまもなく公開ですので、公開の際にはtwitterでご紹介します。

事例の紹介

ふたたび現在制作中のサイトでの事例をご紹介します。

以下のスクリーンショットは「〇〇について」みたいな自己紹介のようなページです。

このページでは、子ページだけでなく他の階層にある施設やサービスのページなどにもリンクを貼っています。

そして前回の記事と同じように、ただリンクを貼るだけでは愛想もそっけもないので、投稿サムネイルや抜粋などと組み合わせたボックスをプラグインで生成しています。

投稿画面

上記のページの投稿画面は以下のような感じです。

リンクのボックスの部分がURLをコピペしているだけなのがおわかりいただけると思います。

URLからサムネイルや抜粋を取得する仕組み

ここでやっていることの中でポイントは2つあります。

WordPressのoEmbed

WordPressにはYoutubeのURLをコピペするだけで動画をページに埋め込む機能があります。

あれはoEmbedという機能で、自作プラグイン用にAPIもコアの中に提供されています。

今回使用したプラグインでは、このoEmbedを使用して同じサイト内のリンクをにフィルターを掛けるという処理をしています。

参考: WordPressのwp_embed_register_handler()を使う

URLから記事のIDを取得する。

WordPressには、url_to_postid() という関数があって、この関数は引数に同じサイト内のURLをわたすと記事のIDを返してくれます。

戻り値のIDをさらに get_post() 関数に渡してあげれば、投稿オブジェクトが取得できますので、あとはもうやりたい放題という感じです。

投稿サムネイルのサイズを選びたい!

前回の記事でもさらっと書きましたが、投稿サムネイルは複数のサイズが生成されます。

デザインによってこのサムネイルのサイズを指定したいので、若干イレギュラーかも知れませんがURLの末尾に以下のようにハッシュリンクを付けるようにし、それをサムネイルサイズとして使用することにしました。

http://example.com/archives/1111#post-thumbnail

もしハッシュリンクがない場合は、デフォルトの”post-thumbnail”が選択されます。

以降では、実際のインストール方法をご紹介します。

プラグインのインストール

以下のソースをプラグインとしてインストールするか、テーマのfunctions.phpにコピペしてください。

ページで抜粋を有効にする。

上述のショートコードでは、子ページの抜粋を表示しますが、WordPressのページにはデフォルトでは抜粋が表示されません。

WP Total Hacksプラグインをインストールして「ページに”抜粋”を追加する」を有効化してください。

投稿サムネイルを有効にする。

ショートコードで出力される画像はそれぞれの記事の投稿サムネイルです。

これはテーマのfunctions.phpに以下の2行を追加してください。

add_theme_support('post-thumbnails');
add_image_size('archives', 200, 112, true);

1行目はテーマで投稿サムネイルを使いますという意味です。

2行目はarchivesという名前で画像のサイズを追加してねという意味で、この行を追加することで幅200px、高さ112pxの画像がアップロード時に自動的に生成されるようになります。

CSSを用意する。

CSSはデザインにあわせて用意してください。今回使用したCSSは以下のような感じです。

プラグイン側で投稿サムネイルのサイズ名(この場合はarchives)をクラス属性として付加しますので、サムネイルサイズに合わせて複数のCSSを用意することも可能です。

.sc_post.archives
{
    border: 1px solid #dedede;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 1em;
    overflow: auto;
    background-image: url(img/bg-white.png);
    background-repeat: repeat-x;
    background-position: left bottom;
}

.sc_post.archives .post_thumb
{
    float: left;
    margin-right: 10px;
    width: 202px;
    height: 114px;
    overflow: hidden;
}

.sc_post.archives .post_content
{
    overflow: hidden;
}

.sc_post.archives h4
{
    font-weight: bolder;
    margin-bottom: 1px !important;
}

.sc_post.archives .post_excerpt,
.sc_post.archives .more
{
    font-size: 12px;
    line-height: 18px;
    margin-top: 10px;
}

.sc_post.archives .more a
{
    background-image: url(img/detail.png);
    background-repeat: no-repeat;
    background-position: left top;
    display: block;
    width: 102px;
    height: 25px;
    text-indent: -9999px;
}

.sc_post.archives .more a:hover
{
    background-position: left bottom;
}

記事にURLをコピペする。

最後に記事内にURLをコピペしていきましょう。

URLの末尾には#archivesとか#thumbnailとか#mediumなど画像のサイズ指定も行ってください。

以下のような感じです。

http://example.com/about#archives

まとめ

前回の記事に引き続きコンテンツ制作の現場でちょっとラクをしちゃうためのテクニックをご紹介しました。

このテクニックを応用すれば記事やページごとに違うCSSも適用できますので、手入力では困難な複雑なレイアウトを可能にしつつ、パソコンに詳しくないクライアントでも容易にメンテナンスできるサイトが作れますので、ぜひおすすめしたいテクニックです。

ちなみに単純に投稿サムネイルだけのリンクを生成するソースも置いておきますので、もしよければ。