【Arkhe】ヘッダーにSNSアイコンを追加する

当サイトは広告を含んでいます。

2025-04-092025-04-15

ヘッダーにSNSアイコンを追加したい…

今回は、Wordpressテーマ「Arkhe（アルケー）」での、ヘッダーにSNSアイコンを追加する方法を紹介します。

【Arkhe（アルケー）】アクションフックを活用

Arkheではアクションフックを活用することで、ヘッダーにアイコンを追加することが可能です。

追加phpコード

以下のコードを、functions.phpに追加しましょう。

「外観」＞「テーマファイルエディター」＞「Arkhe Child」＞「functions.php」に追記して下さい。

（リンクは各自設定してください。）

そのままコピペOK！

// ヘッダー右側にソーシャルメディアリンクを追加
add_action( 'arkhe_header_right_content', 'add_custom_header_right_content' );
function add_custom_header_right_content() {
    echo '<div class="header-social-links" style="display: flex; gap: 10px;">';
    echo '<a href="https://line.me" target="_blank" aria-label="LINE"><i class="fab fa-line"></i></a>';
    echo '<a href="https://instagram.com" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a>';
    echo '</div>';
}

function add_fontawesome_cdn() {
    wp_enqueue_style( 'font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css' );
}
add_action( 'wp_enqueue_scripts', 'add_fontawesome_cdn' );

追加CSSコード

以下のCSSコードも追加してください。

そのままコピペOK！

.header-social-links{
    padding-left: 20px;
}

.header-social-links a {
  color: inherit;
  font-size: 30px;
  transition: color 0.3s;
  padding-right: 20px;
}

.header-social-links a:hover {
  color: #F0F0F1;
}