便利な会員登録機能とか会員限定機能が付いていて一見簡単そうに見えるんですが、TCDは他のテーマと若干使い勝手が違うんで、『こんなはずじゃなかった』とならないようにカスタマイズをまとめました
エンジニア以外の素人にとっては知識のない状態から調べながら修正するのは本当に時間の無駄なんで、これからEVERYをカスタマイズして使おうとしてる人の参考になればと思います
ちなみに、わざわざEVERYを選ぶのは会員機能が付いてるからだと思いますが、もしそれ以外の理由であれば正直あまりお勧めはできません（設定が本当に面倒なので）
会員機能がいらないならAFFINGERの方が簡単です
気になる所にジャンプ
ヘッダー画像上の
キャッチコピー部分と検索を消す
<?php if (!is_mobile()) { ?>
携帯に表示させたくない要素(内容)
<?php } ?>↑対象の箇所にこれを適用させればOKです
今回の対象はヘッダー部分のキャッチコピーと検索バーなので、まずは
<?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 } ?>↑これに変えて、あとは↓のCSSで携帯で見た時のレイアウトを好きなように調整
/*携帯で見た時に下記のレイアウトを適用させる*/
@media (max-width: 768px){
{
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を削除したい場合は↓を削除すればOKです
<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>↑のように好きな文言に変えればOKです
ちなみにこれをやると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目あたり）
フリースペースで
アコーディオンメニューが
正常に動作しない場合
これ、ほんとハマった
公式では
これで解決するって書いてあったけど出来ない
原因としてはフリースペースにテキストで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>↑これを削除して、それと同じ場所に↓の検索バーを記述すればOK
<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なので、携帯用の表示も変えたいなら↓これ
@media (max-width: 768px){
form#searchform.searchform {
幅とか高さとか好みで
}
}PCだけヘッダー上の
（ナビゲーション）メニューを
非表示にする
TCDのEVERYはPCでメニュー表示した際に携帯にもメニューが表示される設定になってるので、携帯にだけメニューを表示させたい場合はPCの方を非表示にすればOKです
やり方は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' => '' ) ); ?>コメントアウト（出力しないように）すればいいんですが、もしPHPいじるのが不安な場合は↓のように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の紹介サイト見てるとほとんどのサイトでこういう買わなきゃ分からない買い手の負担を記載してないんで、買うなら買うで最低限ここまではカスタマイズする必要があるという事を買う前に知っておいてもらいたいなと
会員登録機能だったりそういうのは便利だし何もない状態から自分でやろうとしたらもっと苦労するのは間違いないけど、もうちょいテーマの料金高くていいから色んな角度から試して使いやすいようにしてもらいたいなと思う
まあこの辺の設定しておけばよっぽど困る事はないとは思うんだけど、PHPとか触るのが怖い初心者の方はAFFINGERにしておいた方がいい
この記事へのコメントはありません