WordPressテーマSANGOの質問

他サイトへのリンクカードを2つデザインの違うものを用意したい

アバター
フレン

sangoをいつも愛用させていただいています。

他サイトへのリンクカードのショートコードを2つ用意して、それぞれデザインの違うものにしたいのですが、どのようにしたらよいでしょうか?

回答のほどよろしくお願いいたします。

SANGOのショートコード一覧
SANGOのショートコード一覧
コメントへの回答
サルワカくん
サルワカくん
2019/09/10

SANGOのショートコードの作成は、library/functions/style-shortcode.phpで行っています。
この中の複製したいショートコードの関数を子テーマのfunctions.phpにコピペして、関数名だけ変えればOKです。
例えば「他サイトへのリンクカードのショートコード」はstyle-shortcode.phpの以下のコードにより作られています。

add_shortcode('sanko', 'sng_othersite_link'); // 他サイトへのリンクを出力
// ...省略...
function sng_othersite_link($atts)
{ $href = isset($atts['href']) ? esc_url($atts['href']) : null; $title = isset($atts['title']) ? esc_attr($atts['title']) : null; $site = isset($atts['site']) ? '<span>' . esc_attr($atts['site']) . '</span>' : ""; $target = isset($atts['target']) ? 'target="_blank"' : ""; $rel = isset($atts['rel']) ? ' rel="nofollow noopener noreferrer"' : ' rel="noopener noreferrer"'; if ($href && $title) { // タイトルとURLがある場合のみ出力 $output = <<<EOF <a class="reference table" href="{$href}" {$target}{$rel}> <span class="tbcell refttl">参考</span> <span class="tbcell refcite">{$title}{$site}</span> </a>
EOF; return $output; } else { return '<span class="red">参考記事のタイトルとURLを入力してください</span>'; }
} // END sng_othersite_link

これを複製する場合、以下のようなコードを子テーマのfunctions.phpに追加します。

add_shortcode('sanko2', 'my_othersite_link'); // 他サイトへのリンクを出力
function my_othersite_link($atts)
{ $href = isset($atts['href']) ? esc_url($atts['href']) : null; $title = isset($atts['title']) ? esc_attr($atts['title']) : null; $site = isset($atts['site']) ? '<span>' . esc_attr($atts['site']) . '</span>' : ""; $target = isset($atts['target']) ? 'target="_blank"' : ""; $rel = isset($atts['rel']) ? ' rel="nofollow noopener noreferrer"' : ' rel="noopener noreferrer"'; if ($href && $title) { // タイトルとURLがある場合のみ出力 $output = <<<EOF <a class="my-reference reference table" href="{$href}" {$target}{$rel}> <span class="tbcell refttl">参考</span> <span class="tbcell refcite">{$title}{$site}</span> </a>
EOF; return $output; } else { return '<span class="red">参考記事のタイトルとURLを入力してください</span>'; }
} // END sng_othersite_link


・ここでは複製したショートコード名をsanko2としています。好きな名前でOKです。
・関数名はsng_othersite_linkからmy_othersite_linkに変更しています(2箇所書きかえる必要があります)。こちらも別の名前でもOKです。
・カードのHTMLに.my-referenceというクラスを追加しておきました。複製したカードに対してのみスタイルを適用したい場合は.my-reference { ~ }などとCSSを書くことになります。

よろしくお願いします。

アバター
フレン
2019/09/10

解決しました。
ありがとうございました。^ ^

アバター
フレン
2019/09/10

もう一度すみません。
他サイトへのリンクカードの左側関連を任意の画像に変更することは可能でしょうか?

サルワカくん
サルワカくん
2019/09/11

リンクカードのアイコンはFontAwesomeを疑似要素で指定することにより出力されています。

.reference .refttl:before { content: "\f02e";
}

f02eの部分を好きなアイコンのコードに書き換えることで変更できます。
アイコン一覧
アイコンのコードの探し方

よろしくお願いします。

アバター
フレン
2019/09/11

すみません。私の質問文が間違えておりました。

FontAwesomeを利用するのではなく、自分で作成した画像に差し替えたい場合は、どのようにしたら良いでしょうか?

「関連記事」のように、アイキャッチを読み取るのではなく、作成画像を他リンクカードに入れたいのです。

サルワカくん
サルワカくん
2019/09/13

あ、そういうことですね。
大変申し訳ないのですが、こちらは画像を挿入する機能には対応していません…。

アバター
フレン
2019/09/13

返信ありがとうございます。

試行錯誤した結果、phpの方で読み取ることが出来ました。

お手数お掛けして申し訳ありませんでした。

サルワカくん
サルワカくん
2019/09/13

丁寧にありがとうございます。
いえ、自己解決ありがとうございました。