未経験からwebデザイナーになった私が、ステップアップするためのTIPSを紹介
webデザイン

【自作WordPress】クリックすると投稿ページにリンクするようにする

投稿記事のURLを取得するテンプレートタグ

こんにちは!sagayuriです。
最近1からWordPressを構築する機会がありまして、私はPHPの知識は全くなくて不安だったのですが、色々と検索しまくた結果、なんとか終えることができました。
その時学んだことから、今後もまた使いそうな事柄を紹介していこうと思います。

静的なサイトをワードプレス化する主な手順

通常のサイトをWordPress化するための流れはざっくりと以下のような流れになります。

  1. ワイヤーフレーム作成
  2. XDなどでデザインを作成
  3. HTML/CSSを使ってコーディング
  4. ワードプレスの環境を作る
  5. 作成したHTMLをWordPress用に分割していく
  6. リンク先や画像のパスをWordPress用に書き換え

大まかにこのような上れになります。
複雑そうだな…と思うのですが、所定のコードを覚えておけば、パスの書き換えも意外と迷わずにできます。

新着情報など更新される情報にリンクさせる場合

コーポレートサイトなどでよく見る、「新着情報」や「ニュース」など、よく見ますよね。
トップページなどでは新着情報が一覧で表示されていて、それぞれの情報をクリックすると、詳細ページにリンクしますよね。
その場合はaタグの中にどんな記述をすれば良いのでしょうか?

新着情報は投稿で更新する

おさらいですが、新着情報など適宜更新される情報は「投稿」を使用して更新されることがほとんどです。なのでどんなパーマリンクになるかわからないので、一覧になった時はaタグになんて書いて良いのか???となってしまいます。

テンプレートタグ<?php the_permalink() ?>を使う

テンプレートタグって?

テンプレートタグとは、WordPressに対して何かを表示したい時や、何かの値を取得したい時に使うタグです。
静的サイトを自分でWordPress化する時は、このテンプレートタグが大活躍。というか絶対に必要になります。

投稿記事のURLを取得し出力してくれるタグ

投稿一覧ページを作成したら、(この処理はループ処理、というものを使います。)
今度は1つ1つの記事をクリックしたときに対応する記事を表示するようにリンク先を設定する必要があります。通常はどこか違うページにリンクさせるときはaタグを使って以下のように記述しますね。

<a href=”https://xxxxxx>記事へリンクする</a>

テンプレートタグを使うときは、href=””の中身をテンプレートタグに入れ替えます。
すると以下のようになります。
<a href=”<?php the_permalink(); ?>”>記事へリンクする</a>

このようにすると、いちいちリンク先のURLを指定しなくても、対応した投稿ページへリンクしてくれます。簡単!

今回は、テンプレートタグのほんの一例を紹介しました。
また、よく使うテンプレートタグについて紹介するシリーズでやってみようと思います。