【Arkhe】ヘッダーにボタンを設置する方法

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

2025-04-022025-04-03

WordPressテーマ「Arkhe（アルケー）」でヘッダーにボタンを設置する方法をご紹介します。

今回は、グローバルナビゲーションを下側に表示する場合に対応しております。「外観」＞「カスタマイズ」「ヘッダー」＞「グローバルナビゲーション」より変更可能です。

Arkhe特有の“フック”を活用していきたいと思います。

Font Awesomeのアイコンを読み込む

Font Awesomeのアイコンを読み込むために、<head>タグ内に以下のコードを追加してください。

そのままコピペOK！

<!-- Font AwesomeのCDNを読み込む -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

functions.phpにフックを追加

「外観」＞「テーマファイルエディタ―」＞「functions.php」に以下のコードを追加してください。

そのままコピペOK！

// ヘッダー右側にリンクを追加
add_action( 'arkhe_header_right_content', 'add_custom_header_right_content' );
function add_custom_header_right_content() {
    echo '<div class="header-links">';
    echo '<a href="https://www.instagram.com/" target="_blank" class="instagram"><i class="fas fa-instagram"></i>Instagram</a>';
    echo '<a href="https://www.line.me/ja/" target="_blank" class="line"><i class="fas fa-comment-dots"></i>LINE</a>';
    echo '</div>';
}

カスタムCSSを追加

最後にCSSでお好みにカスタマイズしましょう。

そのままコピペOK！

/* ヘッダーのリンクを横並びに配置 */
.header-links {
    display: flex; /* 横並びにする */
    font-size: 16px;
    align-items: center; /* 垂直方向の中央揃え */
    margin: 0;
    justify-content: flex-end; /* 右寄せ */
}

/* リンクの基本デザイン */
.header-links a {
    padding: 8px 16px;
    text-decoration: none; /* 下線をなくす */
    display: flex;
    align-items: center;
    flex-direction: column; /* アイコンを上、テキストを下に配置 */
    width: 150px;
    border-radius: 10px;
    transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* アイコンのデザイン */
.header-links a i {
    font-size: 20px;
    margin-bottom: 5px;
}

/* ホバー時のエフェクト（透明度を下げる） */
.header-links a:hover {
    opacity: 0.8;
}

/* 最初のリンクの左側の余白をなくす */
.header-links a:first-child {
    margin-left: 0;
}

/* Instagramボタンのデザイン */
.header-links .instagram {
    background-color: #b89c3e;
    color: #fff;
    border: 1px solid #a88f39;
}

/* LINEボタンのデザイン */
.header-links .line {
    background-color: #008000;
    color: #fff;
    border: 1px solid #035b03;
}