【Cocoon】モバイルボタンにカテゴリリンクを表示する方法

やりたいこと

  • Cocoonのモバイルボタンの#logoで表示するものを,記事カテゴリへのリンクに入れ替える
  • カテゴリページやホームページでは,そのままロゴボタンにする
スポンサーリンク

やったこと

元ファイルのコピー

親テーマで#logoについて記載されてるファイルをコピーする

サイト名 > public_html > wp-content > themes > cocoon-master > tmp > mobile-logo-button.php

この mobile-logo-button.php をコピーして次の場所に貼り付ける

サイト名 > public_html > wp-content > themes > cocoon-child-master > tmp > mobile-logo-button.php

※tmpフォルダがなければ作る

mobile-logo-button.php の編集

コピー後のファイルを編集する

元のプログラム

<?php //モバイル用のホームボタン
/**
 * Cocoon WordPress Theme
 * @author: yhira
 * @link: https://wp-cocoon.com/
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 */
if ( !defined( 'ABSPATH' ) ) exit;
global $_MENU_CAPTION;
global $_MENU_ICON;
//$icon_class = $_MENU_ICON ? $_MENU_ICON : 'logo-menu-icon';
$home_url = user_trailingslashit(get_home_url());
$home_url = apply_filters('site_logo_url', $home_url);
$home_url = apply_filters('mobile_header_site_logo_url', $home_url);
$site_logo_text = apply_filters('site_logo_text', get_bloginfo('name'));
$site_logo_text = apply_filters('mobile_header_site_logo_text', $site_logo_text);
?>
<!-- ロゴボタン -->
<li class="logo-menu-button menu-button">
  <a href="<?php echo esc_url($home_url); ?>" class="menu-button-in">
    <?php
    $logo_url = get_the_site_logo_url();
    //ロゴが存在する場合は画像
    if ($logo_url): ?>
      <img class="site-logo-image" src="<?php echo esc_url($logo_url); ?>" alt="<?php echo esc_attr($site_logo_text); ?>">
    <?php else: ?>
      <?php echo $_MENU_CAPTION ? $_MENU_CAPTION : $site_logo_text; ?>
    <?php endif; ?>
  </a>
</li>

追加後のプログラム

<?php //モバイル用のホームボタン
/**
 * Cocoon WordPress Theme
 * @author: yhira
 * @link: https://wp-cocoon.com/
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 */
if ( !defined( 'ABSPATH' ) ) exit;
global $_MENU_CAPTION;
global $_MENU_ICON;
//$icon_class = $_MENU_ICON ? $_MENU_ICON : 'logo-menu-icon';
$home_url = user_trailingslashit(get_home_url());
$home_url = apply_filters('site_logo_url', $home_url);
$home_url = apply_filters('mobile_header_site_logo_url', $home_url);
$site_logo_text = apply_filters('site_logo_text', get_bloginfo('name'));
$site_logo_text = apply_filters('mobile_header_site_logo_text', $site_logo_text);
$my_category = get_the_category();
?>
<!-- ロゴボタン -->
<li class="logo-menu-button menu-button">
  <?php if ( is_single() ): ?>
    <a href="<?php echo get_category_link($my_category[0]->term_id); ?>">
      <i class="fas fa-chevron-circle-left"></i>
      <?php echo $my_category[0]->name ?>
    </a>
  <?php else: ?>
  <a href="<?php echo esc_url($home_url); ?>" class="menu-button-in">
    <?php
    $logo_url = get_the_site_logo_url();
    //ロゴが存在する場合は画像
    if ($logo_url): ?>
      <img class="site-logo-image" src="<?php echo esc_url($logo_url); ?>" alt="<?php echo esc_attr($site_logo_text); ?>">
    <?php else: ?>
      <?php echo $_MENU_CAPTION ? $_MENU_CAPTION : $site_logo_text; ?>
    <?php endif; ?>
  </a>
  <?php endif; ?>
</li>

こちらのサイトを使って比較してみてください

関連してやったこと

モバイルの場合は上記のことをやれば,個別記事 → カテゴリ への導線が敷ける.
同じようなことをPC向けページにも実装したい.

追加したプログラム

functions.php

//カテゴリリンク(投稿ページのみ)
function myCategoryLink() {
	$category = get_the_category();
	$code = '
	<a class="cat-link" style="font-size: 20px;" href="'.get_category_link($category[0]->term_id).'">
		<i class="fas fa-chevron-circle-left"></i> '.$category[0]->name.'
	</a>
	'; return $code;
} add_shortcode('catLink', 'myCategoryLink');

このプログラムで,[catLink] というショートコードが作れる.
これを,ウィジェットで追従するサイドバーに貼り付ければOK.
※スタイリングが面倒だったので,記事下に使われてた class=”cat-link” を流用した.

念のため,カスタムHTMLで表示する場合を,投稿記事のみに設定してください.

あとは,CSSでモバイルのとき非表示にする.

style.css

@media screen and (max-width: 834px){
	/** カテゴリリンク削除 **/
	/*カスタムHTMLのID*/ {
		display: none;
	}
}

参考サイト

WordPressでカテゴリーを取得するための関数を解説|Yoshi-logbook
WordPressでは投稿記事をカテゴリー毎に分類することができます。特にブログサイトではカテゴリーがよく使われます。カ
タイトルとURLをコピーしました