このサイトはWordPressテーマ「JIN」を使用しています。
JINはシンプルで使いやすくデザインも柔らかくて、とても良いテーマだと思います☆
サイト制作に当たって少しカスタマイズした部分があったのですが、ここでは
ピックアップコンテンツ「メニュータイプ」をオシャレにするカスタマイズ
を紹介したいと思います。
カスタマイズは自己責任でお願いします。不具合が出た時に、テーマやプラグイン製作者に直接質問もしくはSNSで発信するのはやめましょう！
目次
どんなことが出来るの？
こんな感じでピックアップコンテンツ「メニュータイプ」をオシャレに出来ます☆
カスタマイズ方法
ピックアップコンテンツのタイプ選択
外観 > カスマイズ > トップページ設定 > ピックアップコンテンツのタイプ選択
を「メニュータイプ(文字なし)」に設定(文字なしであることに注意)。
ピックアップの追加
外観 > メニュー > ピックアップコンテンツ
でピックアップコンテンツを追加(ピックアップコンテンツの作り方)。
functions.php にオシャレコードを追加
// ピックアップコンテンツの装飾開始
function pickup_decoration_start() {
if(wp_is_mobile()) return;
return '<ul class="pickup-contents" style="margin-top:-15px;margin-bottom:0px"><li style="margin-top:0px"><img src="https://tempura-kingdom.jp/wp-content/uploads/pickup_label_0705.png" /></li><li></li><li></li><li></li></ul>
<div style="background-color:#19c1c6; padding-bottom:10px">';
}
// ピックアップコンテンツのキャッチフレーズ表示
function pickup_catchphrase($catchphrase) {
if(wp_is_mobile()) {
return '<div style="text-align:center; margin-top:5px; margin-left:-5px; margin-right:-5px; font-size:70%"><strong>'.$catchphrase.'</strong></div>';
} else {
return '<div style="text-align:center; margin-top:5px; font-size:110%">'.$catchphrase.'</div>';
}
}
// ピックアップコンテンツの装飾終了
function pickup_decoration_end() {
if(wp_is_mobile()) return;
return '</div>';
}
外観 > テーマファイルエディタ > テーマのための関数（functions.php）
に上記を追加。子テーマの場合はjin-childのfunctions.phpの方がいいです(テーマがバージョンアップしても影響がないため)。
<?php
$menu_name = 'pickup-contents';
$locations = get_nav_menu_locations();
if(isset($locations[ $menu_name ])){
$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
}
if(isset($menu->term_id)){
$menu_items = wp_get_nav_menu_items($menu->term_id);
}
if(isset($menu_items)):
?>
<div class="pickup-contents-box <?php is_animation_style(); ?>">
<!-- ピックアップコンテンツの装飾開始 -->
<?php echo pickup_decoration_start() ?>
<ul class="pickup-contents">
<?php
foreach ($menu_items as $menu):
$page_id = $menu->object_id;
$page_type = $menu->object;
$menu_name = $menu->title;
$thumbnail_id = get_post_thumbnail_id($page_id);
$image_attributes = wp_get_attachment_image_src($thumbnail_id,'small_size');
$content = get_page($page_id);
$target = $menu->target;
?>
<li>
<?php if( $page_type == 'category' ): ?>
<?php
$cat_class = get_category($page_id);
$cat_option = get_option($page_id);
$cat_eyecatch = $cat_option['cps_image_cat_pickup'];
?>
<a href="<?php echo get_category_link($page_id); ?>" target="<?php echo $target; ?>">
<div class="pickup-image">
<?php if( ! empty( $cat_eyecatch ) ) :?>
<img src="<?php echo $cat_eyecatch; ?>" width="269" height="151" alt="<?php jin_attach_resize_alt($cat_eyecatch,"small_size"); ?>" />
<?php else: ?>
<img src="<?php echo get_jin_noimage_url(); ?>" width="269" height="151" alt="no image" />
<?php endif; ?>
<?php if( is_pickup_style() == "menu-style" ) : ?>
<div class="pickup-title ef"><?php echo $menu_name; ?></div>
<?php endif; ?>
</div>
</a>
<?php else: ?>
<a href="<?php echo get_permalink($page_id); ?>" target="<?php echo $target; ?>">
<div class="pickup-image">
<?php if ( $image_attributes ): ?>
<img src="<?php echo $image_attributes[0]; ?>" alt="<?php jin_attach_resize_alt($image_attributes[0],"small_size"); ?>" width="269" height="151" />
<?php else: ?>
<img src="<?php echo get_jin_noimage_url(); ?>" width="269" height="151" alt="no image" />
<?php endif; ?>
<?php if( is_pickup_style() == "menu-style" ) : ?>
<div class="pickup-title ef"><?php echo $menu_name; ?></div>
<?php endif; ?>
</div>
<!-- ピックアップコンテンツのキャッチフレーズ表示 -->
<?php echo pickup_catchphrase($menu_name) ?>
</a>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
<!-- ピックアップコンテンツの装飾終了 -->
<?php echo pickup_decoration_end() ?>
</div>
<?php endif; ?>
外観 > テーマファイルエディタ > 編集するテーマを選択:JIN > テーマファイル > include > pickupstyle > pickup-contents-menu-type.php に
<!-- ピックアップコンテンツの装飾開始 -->
<?php echo pickup_decoration_start() ?>
<!-- ピックアップコンテンツのキャッチフレーズ表示 -->
<?php echo pickup_catchphrase($menu_name) ?>
<!-- ピックアップコンテンツの装飾終了 -->
<?php echo pickup_decoration_end() ?>
のように追加。
JINの親テーマを直接編集しています。失敗したらサイト自体が見れなくなる恐れがあるため、不安な方は行わないようお願いします(出来ればPHPが分かる人以外はいじらない方がいいです)。
注意点
【危険】pickup-contents-menu-type.php を拡張
この拡張はJINの親テーマを編集しているため、JINがバージョンアップしたら毎回行わなくてはいけません。面倒な方は素直に「メニュータイプ」か「記事タイプ」のピックアップコンテンツを使いましょう。
なんでカスマイズしたの？
ひとことでいうと「メニュータイプ」のデザインがダサかったから。
あと「記事タイプ」にすると自動スクロールが入ってクリックしづらかったり。
親テーマをいじるとバージョンアップの度に修正しないといけなくて、めっちゃ面倒なんですけど、デザイナーのサイトデザインが気にいっちゃったので作っちゃいました笑
ヒトデブログさんのようなピックアップコンテンツにしたいけど画像発注とかにはお金がかけられない、みたいな人には使えるかもですね。
最後に
〜オセロを作りながらゲームのプログラムを学ぼう〜
そんな人のためにこの本を作りました。
オセロを一から作りながら実践形式でプログラムを学べる本です。
すでに完成したプロジェクトを説明するのではなく、実際に作りながら説明していきます。
一緒に手を動かしながら、プログラムを覚えていきましょう🌟
