窓

WEB

TCDのテーマ『MAG』で『関連記事カードリンク』を新しいタブで表示する方法

私も大のお気に入りで、このブログでも使用しているTCDさんのテーマ『MAG』ですが、デフォルトのままだと『関連記事カードリンク』を新しいタブで開くことができません。

ここでは『関連記事カードリンク』を同一のタブではなく、新しいタブで開く方法について説明します。

子テーマに記述するの? それとも親テーマに記述するの?

早速、作業に入りたいのですが、ちょっとその前に・・・

以前、こちらの記事( )で子テーマの作成方法について説明しました。

 

親テーマのアップデートも何のその、カスタマイズしたい部分にだけ上書きすることができるとても便利な子テーマですが、『functions.php』の扱いに関しては注意が必要です。

『style.css』などと違い、『functions.php』はコードを追加することはできるけれど、上書きすることはできません。

『functions.php』の場合は単なる上書きではなく、親テーマの『fuctions.php』にある関数と、子テーマの『fuctions.php』にある関数の両方を読み込んでしまう為、同名の関数が2回実行されることとなり、エラーとなってしまうのです。

つまり、親テーマに記述してあることを子テーマに再度記述してしまうと、WordPress 自体表示されなくなってしまうのです!!

ということで、今回は『functions.php』の記述の一部を変更したいので、親テーマに直接書き込んでいくことにしましょう。

該当箇所を探す

WordPress の 管理画面 外観テーマの編集 の順にクリックします。

編集するテーマは、上記の説明のとおり子テーマではなく親テーマの『MAG』を選択し、テーマのための関数(functions.php)をクリックします。

 

482行目あたりにある『カードリンクパーツ』の中の、526行目あたりの『アイキャッチ画像を取得』の部分に追記していきます。

クリックすると拡大します。
function.php

記述するコード

【修正前のコード】

  //アイキャッチ画像を取得
  if(has_post_thumbnail($id)) {
        $img = wp_get_attachment_image_src(get_post_thumbnail_id($id),'size-card');
        $img_tag = "<img src='" . $img[0] . "' alt='{$title}' width=" . $img[1] . " height=" . $img[2] . " />";
        } else { $img_tag ='<img src="'.$no_image.'" alt="" width="'.$img_width.'" height="'.$img_height.'" />';
    }

        $clink ='<div class="cardlink"><a href="'. $url .'"><div class="cardlink_thumbnail">'. $img_tag .'</a></div><div class="cardlink_content"><span class="timestamp">'.$date.'</span><div class="cardlink_title"><a href="'. $url .'">'. $title .' </a></div><div class="cardlink_excerpt">' . $excerpt . '</div></div><div class="cardlink_footer"></div></div>';

        return $clink;
      }

add_shortcode("clink", "clink_scode");


【修正後のコード】

  //アイキャッチ画像を取得
  if(has_post_thumbnail($id)) {
        $img = wp_get_attachment_image_src(get_post_thumbnail_id($id),'size-card');
        $img_tag = "<img src='" . $img[0] . "' alt='{$title}' width=" . $img[1] . " height=" . $img[2] . " />";
        } else { $img_tag ='<img src="'.$no_image.'" alt="" width="'.$img_width.'" height="'.$img_height.'" />';
    }

        $clink ='<div class="cardlink"><a href="'. $url .'"  target="_blank"><div class="cardlink_thumbnail">'. $img_tag .'</a></div><div class="cardlink_content"><span class="timestamp">'.$date.'</span><div class="cardlink_title"><a href="'. $url .'" target="_blank">'. $title .' </a></div><div class="cardlink_excerpt">' . $excerpt . '</div></div><div class="cardlink_footer"></div></div>';

        return $clink;
      }

add_shortcode("clink", "clink_scode");

 

8行目の <a href=”‘. $url .'”> の後ろに半角スペースを空けて『 target=”_blank” 』を追記します。

修正箇所は2ヶ所です。右にスクロールすると、2つ目の <a href=”‘. $url .'”> が現れるので、そちらにも同様に『 target=”_blank” 』を追記します。

難しければ、修正前の8行目の記述 を 修正後の8行目の記述 にそっくりそのまま差し替えてしまいましょう。

 

【修正前】

コード


【修正後】

コード

最後に

これで、記事関連リンクカードをクリックすると、同一のタブではなく新しいタブで表示されるようになりました。

作業自体はそれほど難しくないのですが、functions.php に関しては、わずかなミスでも WordPress が表示されなくなってしまいます。

私も、画面が真っ白になって顔面蒼白になったことがあります。十分に気を付けましょう。

 

 
スポンサードリンク
 
スポンサードリンク

ブランコに乗る女の子エックスサーバーで『サブドメイン』を設定して、WordPressをインストールしてみよう前のページ

Local by Flywheel を使って、ローカル環境を構築してみよう次のページlocal by flywheel

関連記事

  1. mistake

    WEB

    『FileZilla』で転送に失敗した場合の操作方法について

    FTPソフト『FileZilla』で転送する際に、『失敗した転送』が発…

  2. 黄色い壁を背に喜ぶ女性

    WEB

    画像圧縮なら『TinyPNG』、使い方とその実力を検証します

    画像を圧縮するならパンダでおなじみの『TinyPNG』、画質を落とさず…

  3. 海を背景にフレームを持つ女性の手

    WEB

    Photoshopで簡単!!画像に枠線を作る方法

    「画像に枠線を作りたい。だけど、どうやって作ればいいの?」そん…

  4. ガッツポーズする男性

    WEB

    アドセンスのサイト追加審査に一発合格したブログの詳細を公開!!

    2018年10月頃までは、一度アドセンスのアカウントを取得してしまえば…

  5. crayon,クレヨン

    WEB

    記事内にソースコードを表示する『Crayon Syntax Highlighter』

    「記事内にソースコードを記述したい場合、どうしたら綺麗に書くことができ…

  6. pencils

    WEB

    さあ、WordPress(ワードプレス)でブログを始めよう!!

    全くの初心者さんでも分かるように、WordPress でブログを始める…

== WORDPRESS 完全マニュアル ==

wordpress

よく読まれている記事

  1. ガネーシャ
  2. 郵便受け
  3. 腕を交差させる草原に座った男性
  4. 窓
  5. ケーブル
  6. チェックリスト
  7. Google Search Console
  8. pencils
  9. mistake
  10. wordpress,ワードプレス

当サイトで使用しているテーマはこちら!!

Gutenberg 完全対応のテーマならコレ!!

Adobeを買うのならどこよりも安い?!

WordPressでブログ始めてみませんか?

パソコンを覗き込む二人の女子
  1. pencils

    WEB

    さあ、WordPress(ワードプレス)でブログを始めよう!!
  2. wordpress,ワードプレス

    WEB

    エックスサーバーで WordPress をインストールする方法
  3. パソコンを前に困っている女性

    WEB

    WordPress簡単移行ができずに手動で移行作業を行う方法
  4. 空にかざした水晶

    WEB

    Retinaディスプレイでもロゴ画像がぼやけないように、クッキリと表示させる方法…
  5. いいえ、結構です。

    WEB

    お名前.comの自動更新の設定を解除する方法
PAGE TOP