【wordpress】記事のタイトルを指定したURLにリンクさせる方法【外部リンク】

こんにちは。記事のタイトルリンクを指定したURL(外部リンク等)にリンクさせる方法について書いていきます。

私のお気に入りのWebサイト紹介のコーナーを見ていただければわかると思うのですが、投稿記事のタイトルをクリックするとこのサイトとは別のサイトへと移動するよ〜ということです。

スクリーンショット-2016-04-21-18.08.32

 

もちろんサイト内部へのリンクでも(こちらの方が動線的に使い道あると思います)

 

functions.phpでカスタムフィールドの設定をする

まずはfunctions.phpに以下のコードを書きます

//リンク先URLを追加するカスタムフィールド作成
add_action('admin_menu', 'add_linkurl');
add_action('save_post', 'save_linkurl');

function add_linkurl(){
     if(function_exists('add_linkurl')){
     //通常の投稿画面でカスタムフィールドを表示する
          add_meta_box('linkurl1', 'リンク先URL', 'insert_linkurl', 'post', 'normal', 'high');
          //カスタム投稿で表示する場合は下記にカスタム投稿名を指定する
          add_meta_box('linkurl1', 'リンク先URL', 'insert_linkurl', 'カスタム投稿名', 'normal', 'high');
     }
}

function insert_linkurl(){
     global $post;
     wp_nonce_field(wp_create_nonce(__FILE__), 'my_nonce');
     echo '<label class="hidden" for="linkurl">リンク先URL</label><input type="text" name="linkurl" size="60" value="'.esc_html(get_post_meta($post->ID, 'linkurl', true)).'" />';
     echo '<p>リンクしたいURLを入力します。</p>';
}

function save_linkurl($post_id){
     $my_nonce = isset($_POST['my_nonce']) ? $_POST['my_nonce'] : null;
     if(!wp_verify_nonce($my_nonce, wp_create_nonce(__FILE__))) {
          return $post_id;
     }
     if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) { return $post_id; }
     if(!current_user_can('edit_post', $post_id)) { return $post_id; }

     $data = $_POST['linkurl'];

     if(get_post_meta($post_id, 'linkurl') == ""){
          add_post_meta($post_id, 'linkurl', $data, true);
     }elseif($data != get_post_meta($post_id, 'linkurl', true)){
          update_post_meta($post_id, 'linkurl', $data);
     }elseif($data == ""){
          delete_post_meta($post_id, 'linkurl', get_post_meta($post_id, 'linkurl', true));
     }
}

 

カスタム投稿で使用する場合、例えばwebsiteという投稿タイプ名のカスタム投稿で使用する際には

add_meta_box('linkurl1', 'リンク先URL', 'insert_linkurl', 'website', 'normal', 'high');

と記述しましょう。

複数のカスタム投稿で使用することができます。必要な分だけ付け加えてください。

そうすると投稿画面にこのような欄が作成されます。

スクリーンショット-2016-04-21-18.29.37

 

必要なページでリンクが出力されるようにする

ここでタイトルに先ほど設定したリンクが出力されるようにします。

content.phpあたりに書いていきます(投稿記事を表示するループの中身が書いてあるところ)

<?php //リンク設定があれば外部へリンク
     $linknourl = get_post_meta( $post->ID, 'linkurl', true );
     if ( !empty( $linknourl ) ) : ?>
        <?php
            //htmlを除去
        $linknourl = htmlspecialchars($linknourl,ENT_QUOTES,'UTF-8');
    ?>
    <a href="<?php echo $linknourl; ?>">
     <?php else : ?>
    <a href="<?php the_permalink(); ?>" >
     <?php endif; ?>
     <?php the_title() ;?>
</a>

 

リンク設定があれば、外部リンクにつなぎ、なければそのまま単一記事のページを開くという風になっています。

これを使えばアイキャッチ画像には外部リンク、タイトルには単一記事へのリンクという風にもできます。アイキャッチ画像に限らず、外部へ〜みたいな風にしておいて両方表示できるようにしてても良いかなぁと思います。

 

単一記事がない場合(カラの場合)にはheader.phpに記述しておいたらよいコードもあるのですが、

そちらは参考にさせていただいた下記の記事の方へどうぞ!!

WordPressの「お知らせ一覧」のタイトルに外部リンクを貼る方法

 

カスタム投稿でカスタムフィールドが反映されていない時に確かめること

カスタム投稿でこのやり方を用いた時に、リンク先URLを書く欄がなかなか表示されなくて少し困ってしまいました。

まず確かめるのは

カスタムフィールドがサポートされているかどうか

     'supports' => array(//記事編集画面に表示する項目を配列で指定することができる
        'title',//タイトル
        'editor',//本文(の編集機能)
        'thumbnail',//アイキャッチ画像
        'custom-fields',
        'excerpt'//抜粋
      )

カスタム投稿を設定しているfunctions.phpの中のこの部分にcustom-fieldsが書いてあるか、または綴りが間違っていないかをチェックしましょう。

 

あとは、投稿画面の右上にある表示設定でカスタムフィールド(リンク先URL)にチェックがついているかどうかを確認してください。

スクリーンショット-2016-04-21-18.52.32

 

こちら両方が設定されているのに表示されない場合は、上記でfuncitons.phpに書いたadd_meta_boxの部分の記述が無い場合があるので確認してみてください。

 

2020/07/25追記
この記事に必要な部分だけgistにあげました。

                

Comments...

2020/07/25 10:07

はじめまして!こちらの記事を参考に設定したのですが、
カスタム投稿が一覧で出力されません。
ちょっと苦戦しています。

「必要なページでリンクが出力されるようにする」はコピペだけで表示されますか?
それともカスタム投稿の仕様に書き直す必要がありますか。

    2020/07/25 04:07

    こんにちは。
    少し古い記事になるので動作確認いたしました。
    「カスタム投稿で記事のタイトルを外部リンクにすること」はこの記事をコピペでできました。

    → 必要なページでリンクが出力されるようにする
    というのがちょっとよくわからないのですが...

    → カスタム投稿が一覧で出力されません。
    ということですので、「カスタム投稿タイプのアーカイブページが表示されない場合の直し方」らへんが役に立つのではないでしょうか。

    記事の追記(このコメントの上部)に少し詳細なコードをあげてみましたのでそちらも参考にしてみてください。(https://gist.github.com/uruly/bbf5f56d972426bc8d91266ff5e64471でも確認できます。)

    お役に立てば幸いです。

    アバター
    from.Reo(管理人)
コメントは認証制です。詳しくは下記の注意をお読みください。お気軽にコメントお願いします!

Write a Comment

コメント時の注意

「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。

Related Memo...

WordPressで現在のカテゴリから親カテゴリ/祖先カテゴリのスラッグを取得

//現在のカテゴリを取得
$categories = get_the_category($post->ID);
$category_slugs = array();
foreach($categories as $category){
    $cat = $category;
    array_push($category_slugs,$cat->slug);
    //親のカテゴリがなくなるまで回す
    while ($cat->parent) {
        $cat_parent_id = $cat->parent;
        $cat = get_category($cat_parent_id);
        array_push($category_slugs,$cat->slug);
    }
}

わりと頑張ってPHP書いてる。

WordPress

WordPressで抜粋の語尾が文字化けするときメモ

以下の記事にて解決。ありがとうございます。

the_excerpt() で表示される &nbsp | Web Design Leaves

 

改行コード等についてのみ触れられていますが、

こういう文字化けにも対応可能でした。

仕事で使ったけれどこのブログにも対応せねばメモ。

WordPress

【WordPress】プラグイン化したカスタム投稿をテーマ内で使うとき

通常テーマ内でカスタム投稿を表示させる時に

$args = array( "posts_per_page" => 5,
        "post_type" => 'news'
    );
$the_query = new WP_Query( $args );
if($posts):

と書けば表示されるのに、プラグイン化していたので表示されなかった話。

 

functions.phpでカスタム投稿を追加している場合は必要ないが、newsというカスタム投稿をプラグイン化していたので、以下の記述が必要でした。

    public function __construct() {
        add_action( 'pre_get_posts', array($this, 'add_my_post_types_to_query') );
    }

    // queryにnewsをセットする
    function add_my_post_types_to_query( $query ) {
        if ( is_home() && $query->is_main_query() )
            $query->set( 'post_type', array( 'post', 'page', 'news' ) );
        return $query;
    }

WordPressプラグインの作り方は、また後日ちゃんとした記事にしたいと思ってます。今回はとりあえず忘れそうなのでメモだけで失礼。

WordPress

【bbpress】管理者以外で投稿時にhtmlが反映されないときの対処【wordpress】

管理者以外で用意した投稿フォームから投稿してもhtmlタグが変換されない。

bbpressがそういう仕様ではあるのだが、それでもhtmlを使いたい場合。

Topic: Allowing Participants to post “unrestricted HTML” · bbPress.org

このスレの一番下より

WordPressにUser Role Editorというプラグインを導入。

指定したユーザにunfiltered_htmlを割り振る。

ユーザを全て管理者にするよりはいいはず。

WordPress

wordmove+ロリポップうまくいかないときメモ

無駄に2回も同じことでハマった。くそう。

rsyncがうまくいかない

ssh接続でrsyncがどうのっていうエラーが出た時

rsync: connection unexpectedly closed (0 bytes received so far) [sender]
rsync error: error in rsync protocol data stream (code 12) at io.c(226) [sender=3.1.0]

権限がおかしい(が自分はどこの権限がおかしいのかよくわかっていない)のだが

ロリポに SSH で公開鍵接続して rsync でサーバー同期をしてみる – IMPOV::In My Point Of View

で公開鍵接続の設定をするとなんか上手くいく(パスワード接続できない→鍵生成・配置→パスワード接続できるようになる。実際には鍵使わずパスワード認証してるのになんでだろう)

 

子ページが404になる

ロリポップサーバーでサブディレクトリを変更して記事が404エラーになる場合の対処法

まさにこれで、WordPressのパーマリンク設定を開いて保存を押すだけで直る。

 

でもこのメモ見る機会なければいいなぁとは思う。

WordPress
more