【Cocoon】ブログカードを新しいタブで開くか個別に設定する-コピペカスタマイズ

【Cocoon】ブログカードを新しいタブで開くか個別に設定する-コピペカスタマイズテーマ
スポンサーリンク

どうも!初めましての方は初めまして、初心者のWebサイト勉強のとみーです!

WordPress の無料テーマ Cocoon では、リンクを貼るときにブログカードを使うことができます。

通常のリンクと比べるとスタイリッシュなので、多くの方がお世話になっていますよね。

とみー
とみー

とみーも愛用しています!

Cocoon に元々備わっている「Cocoon 設定」では

  • 内部リンク:現在のタブ
  • 外部リンク:新しいタブ

といった具合に内部リンクと外部リンクでブログカードの設定を変えることはできるのですが、残念ながら

個別のブログカードの開き方を
設定することはできない

ようになっています。

しかし、実際に使っていると

  • ここのブログカードは新しいタブで開かせたい
  • こっちのブログカードは現在のタブで開かせたい

なんていう風に、内部リンク・外部リンクに関係なく個別の設定がしたくなるケースが意外と多くあります。

とみー
とみー

実はそれ、コピペでできるんです!

そこで今回は、

  • ブログカードを
    • 新しいタブで開くか
    • 現在のタブで開くか
  • 個別に設定する

カスタマイズ方法をまとめました!

スポンサーリンク

カスタマイズ後のブログカードの動作イメージ

現在のタブで開く
現在のタブで開く
新しいタブで開く
新しいタブで開く

今回のカスタマイズをすると、内部リンク・外部リンクに関係なく、1つ1つのブログカードについて

  • 現在のタブで開くか
  • 新しいタブで開くか

を決められるようになります。

見た目は同じですが、下のブログカードは開き方が異なります。

現在のタブで開く」タイプをクリックしたらこちらのページに戻ってくるのを忘れないようにしましょう!

スポンサーリンク

ブログカードの開き方を個別設定するコピペカスタマイズ方法

コピペでカスタマイズ

今回のカスタマイズは、次の2ステップで行います。

カスタマイズ手順
  • STEP1
    Cocoon設定でリンクの開き方を設定
  • STEP2
    JavaScriptコードをコピペする

javascript.js のバックアップを取っておこう

今回のカスタマイズでは、

  • javascript.js

というファイルを操作します。

このファイルはサイトの動作に関係するため、設定を間違えると正常な動作が失われる可能性があります!

そのため、万が一が起きても元に戻せるように、カスタマイズ前に忘れずにバックアップを取っておきましょう。

とみー
とみー

1番簡単なのはファイルの中身をコピーして、メモ帳やテキストエディタに保存しておくやり方です。

STEP1:Cocoon 設定でリンクの開き方を設定

まずは、Cocoon 設定でリンクの開き方を設定します。

とみー
とみー

次の2ステップで行いましょう!

  • STEP1
    「ブログカード」タブを開く

    管理画面サイドメニュー「Cocoon設定」→「ブログカード

  • STEP2
    リンクの開き方を「新しいタブで開く」にする

「ブログカード」タブを開く

WordPress の管理画面サイドメニューの「Cocoon設定」を開きます。

Cocoon設定

通常は「スキン」タブが開かれているはずなので、ここから「ブログカード」タブを開きます。

Cocoon設定:ブログカードタブ

リンクの開き方を「新しいタブで開く」にする

内部ブログカード設定」の「リンクの開き方」の部分に注目します。

内部ブログカード設定:リンクの開き方

新しいタブで開く」にチェックを入れましょう。

同様に「外部ブログカード設定」についても行います。

外部ブログカード設定:リンクの開き方

両方チェックが入れられたら、「変更をまとめて保存」をクリックしましょう。

変更をまとめて保存
とみー
とみー

この段階で、すべてのブログカードが新しいタブで開かれるようになります。

STEP2:JavaScript コードのコピペ

次に、JavaScript コードのコピペを行います。

  • STEP1
    javascript.js を開く

    管理画面サイドメニュー「外観」→「テーマエディター」→「javascript.js

  • STEP2
    javascript.js にコードをコピペする

javascript.js を開く

WordPress の管理画面サイドメニューの「外観」から「テーマエディター」を開きましょう。

外観→テーマエディター

初期設定では「Cocoon Child」が選択されており、「style.css」が開いてあるはずです。

style.cssを開く

今回使用するのは「javascript.js」です。

javascript.jsを開く

javascript.js にコードをコピペする

javascript.js
$(function() {
	$(".wp-block-cocoon-blocks-blogcard.current_tab a").attr("target", "");
});

コードのコピペは以上になります。

とみー
とみー

最後に使い方を確認しましょう!

スポンサーリンク

ブログカードを現在のタブで開かせる方法

上でも触れた通り、今の段階ではすべてのブログカードが

新しいタブ

で開かれるようになっています。

とみー
とみー

そのため、新しいタブで開かせたいブログカードには何もしなくてOKです。

一方で現在のタブで開かせたいブログカードには、ブロックエディター上で少し細工を行う必要があります。

ブログカード:ブロックエディター
ブロックエディター(記事作成画面)

ブログカードブロックをクリックしたときに画面右に表示される「高度な設定」をクリックします。

高度な設定:追加CSSクラス

すると「追加CSSクラス」という入力欄が現れるので、ここに「current_tab」と入力します。

とみー
とみー

これで「current_tab」を付けたブログカードは現在のタブで開かれるようになります。

要するに、次のように使い分けるわけです。

  • 新しいタブで開く:何もしない
  • 現在のタブで開く:「current_tab」を追加CSSに設定

まとめ

お疲れさまでした

今回は、ブログカードの開き方を個別に設定するカスタマイズをご紹介しました。

  • 記事本文中のブログカード:新しいタブ
  • 本文後に読んでもらいたページのブログカード:現在のタブ

のように用途に応じて使い分けると利便性が上がりそうですね。

とみー
とみー

ぜひ参考にしてみてください!

みなさんのサイトをご紹介します!

今回のカスタマイズを導入してくださった方がいらっしゃれば、ぜひコメントや Twitter の方でお知らせください!記事内にてご紹介させていただきます!

コメント

タイトルとURLをコピーしました