注目の記事 PICK UP!

TCDのテーマ『EVERY』のカスタマイズまとめ

 

便利な会員登録機能とか会員限定機能とか付いてて一見簡単そうに見えるけど、他のテーマと若干使い勝手が違うんで、『こんなはずじゃなかった』とならないようにまとめてみました

プロじゃない人間にとっては仕事しながら修正のために1から調べながらってのが本当に時間の無駄なんで、EVERYをカスタマイズして使おうとしてる人の参考になれば嬉しい

本当に苦労した

まいろ君
まいろ君

ヘッダー画像上の
キャッチコピー部分と検索を消す

<?php if (!is_mobile()) { ?>
携帯に表示させたくない要素(内容)
<?php } ?>

↑対象の箇所にこれを適用させる

今回の対象はヘッダー部分のキャッチコピーと検索バーなので、まずは

<?php if ($options['show_header_search']) { ?><a id="header_search_button" href="#">SEARCH</a><?php }; ?>

これを

    <?php if (!is_mobile()) { ?><?php if ($options['show_header_search']) { ?><a id="header_search_button" href="#">SEARCH</a><?php }; ?><?php } ?>

これに変えて検索バー部分を携帯で出力しない(非表示)ようにする

PCと携帯両方に表示させないようにしたくなったら

    <?php if (!is_mobile()) { ?><?php if ($options['show_header_search']) { ?><a id="header_search_button" href="#">SEARCH</a><?php }; ?><?php } ?>

これをそのまま削除
次にキャッチコピー部分の

    <h3 class="desc"><?php echo esc_html(get_bloginfo('description')); ?></h3>

これを

    <?php if (!is_mobile()) { ?><h3 class="desc"><?php echo esc_html(get_bloginfo('description')); ?></h3>
    <?php }; ?><?php } ?>

これに変える
あとは↓で携帯で見た時のレイアウト調整

/*携帯で見た時に下記のレイアウトを適用させる*/
@media (max-width: 770px)
{
header#header 
{
    height:52px;
    margin-top: 0;
}
/*ログイン、会員登録、マイページボタンの場所を上に上げる*/
div#header_button_area 
{
    height:112px;
    margin-top: 0;
}
/*ロゴテキストの高さ調整(ロゴテキストじゃない場合はこのコードは適用されない)*/
span.mobile_logo_text {
    height:130px;
    margin-top: 0;
}
/*ロゴテキストの高さ調整(ロゴテキストじゃない場合はこのコードは適用されない)*/
#header_register {
    background: none!important;
}
/*右側のメニューバーの高さ調整*/
a#menu_button {
    height:46px;
    margin-top: 0;
}
}

固定ページの
アイキャッチを非表示に

/*固定ページのアイキャッチを非表示*/
#post_image .image {
    display: none;
    height: 0px;
}

height無しだと空欄が残るので0にして空白も非表示にしてます

コメント欄のカスタマイズ

comments.phpで元々のコードはこうなってるけど

    <div id="guest_info">
     <div id="guest_name"><label for="author"><span>名前(例:山田 太郎)</span>( 必須 )</label><input type="text" name="author" id="author" value="" size="22" tabindex="1" aria-required='true' /></div>
     <div id="guest_email"><label for="email"><span>E-MAIL</span>( 必須 ) - 公開されません -</label><input type="text" name="email" id="email" value="" size="22" tabindex="2" aria-required='true' /></div>
     <div id="guest_url"><label for="url"><span>URL</span></label><input type="text" name="url" id="url" value="" size="22" tabindex="3" /></div>
    </div>

Eメールの箇所を削除する場合は↓を削除

     <div id="guest_email"><label for="email"><span><?php _e('E-MAIL','tcd-w'); ?></span><?php if ($req) _e('( required )', 'tcd-w'); ?> <?php _e('- will not be published -','tcd-w'); ?></label><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> /></div>

URLを削除する場合は↓を削除

     <div id="guest_url"><label for="url"><span><?php _e('URL','tcd-w'); ?></span></label><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /></div>

見出しの「コメント」を変更

同じくcomments.phpの

  <h3 class="design_headline clearfix rich_font"><?php _e('Comment', 'tcd-w'); ?></h3>

これを↓に変更

  <h3 class="design_headline clearfix rich_font"><?php _e('ここに表示したい文言を入れる', 'tcd-w'); ?></h3>

「コメント数」の表示を変更

コメントが投稿されると、自動でコメント数に応じてカウントされるところの文言の変更

    <li class="active"><a href="#commentlist_wrap"><?php comments_number( '0','1','%' ); ?> <?php _e( 'Comments', 'tcd-w' ); ?></a></li>

最初は↑これになっててこれだと「〇 コメント」になるからそれを変更したい場合

    <li class="active"><a href="#commentlist_wrap"><?php comments_number( '0','1','%' ); ?> <?php _e( '件の口コミ', 'tcd-w' ); ?></a></li>

俺の場合は口コミサイトだったから↑にしたけどその部分を好きな文言に変えればいけます

ちなみにこれをやると、EVERYの場合は文字数の関係でコメント数とトラックバック数の横並びがずれるから文字数は調整しよう
あまりにも長いと不格好になる

送信ボタンの文言変えるのは↓これ

     <input name="submit" type="submit" id="submit_comment" tabindex="5" value="<?php _e('ここに表示させたい文言入れる', 'tcd-w'); ?>" title="<?php _e('Submit Comment', 'tcd-w'); ?>" />

コメント欄の名前のところに
最初から文字を入れておく

footer.phpの/bodyの上に↓を入れる

<script type="text/javascript"><!--
(function(){
var obj = document.getElementById('author');
 if(obj){
  if(obj.value == ''){
  obj.value = 'ここに表示したい名前を入力';
  }
 }
})();
//--></script>

コメント欄を上
(記事の真下あたり)に持ってくる

single.phpの

  <?php
       // comment ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
       if ($options['show_comment']) { comments_template('', true); };
  ?>

↑をコピーして

             custom_wp_link_pages();
           }
         }
    ?>
   </div>

↑これの真下に持ってくる(124目あたり)

フリースペースで
アコーディオンメニューが
正常に動作しない場合

これ、ほんとハマった
公式では

https://tcd-manual.net/?p=7352

これで解決するって書いてあったけど出来ない

原因としてはフリースペースにテキストでHTMLを書いても、表示される段階で「p」とか「br」が勝手に入って正常に作動しない事のようで、WordPressの自動整形を制御しないといけない

functions.phpに↓を記述

add_filter('the_content', 'wpautop_filter', 9);
function wpautop_filter($content) {
    global $post;
    $remove_filter = false;
     
    $arr_types = array('page'); //自動整形を無効にする投稿タイプを記述
    $post_type = get_post_type( $post->ID );
    if (in_array($post_type, $arr_types)) $remove_filter = true;
     
    if ( $remove_filter ) {
        remove_filter('the_content', 'wpautop');
        remove_filter('the_excerpt', 'wpautop');
    }
     
    return $content;
}

TOPページに表示させるために固定ページからコンテンツビルダーで作成してるから多分そこで設定されてるんだろうな

ヘッダー画像内の
ボタンタグ(リンク)を消して
検索バーに変更

header.phpの

<a class="button animate<?php echo $num; $num++; ?>" href="<?php echo esc_url($url); ?>"<?php if($target == 1) { echo ' target="_blank"'; }; ?>><span><?php echo esc_html($button_label); ?></span></a>

これを削除して、それと同じ場所に↓の検索バーを記述

<form role="search" method="get" id="searchform" class="searchform" action="https://revick.jp/">
<div>
<label class="screen-reader-text" for="s">検索:</label>
<input type="text" value="" name="s" id="s">
<div class="submit_button"><input type="submit" id="searchsubmit" value="検索"></div>
</div>
</form>

よくある、検索バーの入力部分にあらかじめ「キーワードを入力」とかを入れておきたい場合は

<input type="text" value="" name="s" id="s">

この部分を

<input type="text" value="" name="s" id="s" placeholder="キーワードを入力してください" required="">

これに変更
ちなみに↓を削除すると検索バーの左側部分の「検索」が消えて右側に虫眼鏡のマークが出るようになる

<label class="screen-reader-text" for="s">検索:</label>

あとはCSSで高さとか幅を調整する

form#searchform.searchform {
幅とか高さとか好みで
}

↑これはPC表示用のCSSなので、携帯に適用させるやつもCSSに追記する

@media (max-width: 770px){
form#searchform.searchform {
幅とか高さとか好みで
}
}

PCだけヘッダー上の
(ナビゲーション)メニューを
非表示にする

TCDのEVERYはPCでメニュー表示した際に携帯にもメニューが表示される設定になってるんで、携帯にだけメニューを表示させたい場合はPCの方を非表示にする

header.phpの

   <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'theme_location' => 'global-menu' , 'container' => '' ) ); ?>

これを

   <?php //wp_nav_menu( array( 'sort_column' => 'menu_order', 'theme_location' => 'global-menu' , 'container' => '' ) ); ?>

コメントアウト(出力しないように)する
もしくは、不安な場合はCSSで非表示に

/*グローバルメニューを非表示に*/
 nav#global_menu { 
 display:none;
	}

で、理想はPCの方でメニューが消えて、元々メニューがあった場所にコンテンツがない扱いになって、そのままメニュー下の要素(大体はヘッダー画像)がそのまま真上に行けばよかったんだけど、非表示にしただけで出力はしてるからヘッダー画像で隠す事にした

/*サイト全体の幅調整*/
	div#container { 
/*全体の高さを上げてメニューを隠す*/
	top:-60px;
	}

↑のTOPの部分は俺のサイトの場合だからうまく隠れるように要調整

どういう出力の仕方してるか意味分からんし、メニュー自体を出力(メニューのところのチェック外す)しないようにするとスマホのメニューも出ないからそれならそれでスマホ専用にプラグイン入れてメニュー作ろうかとか、本当に悩んだけどとりあえずこれで

今のところ不具合はない

ページにコメント欄を追加

<?php { comments_template('', true); }; ?>

これを追加させたい場所に書く

フリースペースにショートコードを
入力できるようにする

front-page.phpの

<?php echo $content['free_space']; ?>

これを↓に変更

<?php echo apply_filters('the_content', $content['free_space']); ?>

これでようやく使えるようになった

TCDのEVERYカスタマイズ

デザインは本当に良いんだけどなんていうかユーザーが使う事を本当に考えてるかどうか疑わしいというのが正直な感想

他のTCDの紹介サイト見てると、ほとんどのサイトでこういう買わなきゃ分からない買い手の負担を記載してないんで、買うなら買うで最低限ここまではカスタマイズする必要があるって事を知っておきたい

会員登録機能だったりそういうのは便利だし何もない状態から自分でやろうとしたらもっと苦労するのは間違いないけど(0から制作会社に依頼すると100万はかかる)

もうちょいテーマの料金高くていいから色んな角度から試して使いやすいようにしてくれたら最高なんだけどね

まあ勉強にはなったしこの辺の設定しておけばよっぽど困る事はないとは思う

TCD公式サイト
EVERYを見る

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

   


関連記事

  1.    

    ランサーズでライター募集したら5人来てくれたけど

  2.    まさか自分がコロナのPCR検査を受ける事になるとは

    まさか自分がコロナのPCR検査を受ける事になるとは

  3.    クリッパーナクレ

    昨日楽しかったね←わかる

  4.    腹痛

    ː̗̀(☉.☉)ː̖́<思考停止は衰退の始まりですよ

  5.    

    姓名判断ってほんと胡散臭い

  6.    【それも人生】それは誤解され続けてるんじゃなくて解り合えないだけなんだということ

    【それも人生】それは誤解され続けてるんじゃなくて解り合えないだけなんだということ

  7.    【解決済】TCDのテーマIZM買ったはいいけど携帯で表示した時だけ記事が左寄せになったり色々厳しい

    【解決済】TCDのテーマIZM買ったはいいけど携帯で表示した時だけ記事が左寄せになったり色々厳しい

  8.    

    服400着貰ったからメルカリ始めたんだけど

  9.    

    パパ活女子の裏事情

PAGE TOP