クールでかっこいいワードプレステーマ を カスタマイズすべ
クールでかっこいいワードプレステーマ を カスタマイズすべ > クールでかっこいいWPテーマをPPC用にカスタマイズ > クールでかっこいいWPテーマをPPC用にカスタマイズ。その1(ロゴヘッダー部分を取り除く)

クールでかっこいいWPテーマをPPC用にカスタマイズ。その1(ロゴヘッダー部分を取り除く)

ロゴヘッダー部分を取り除く

ロゴのブロックがどうなっているか確認。 IEならば右クリック->ソース
2015y01m20d10
 
ソースを探すときの目印を決めておく。探しやすいようにテキストをチェック。
2015y01m20d09
「ホーム」がテキストなので、ソースからその場所を探す。
2015y01m20d11
 
目的のヘッダー部分は、「ホーム」より上のブロックなので、この辺りかな?
2015y01m20d12
ID も header-inner とかになってるし、このブロックがくさいね。
わかりやすいようにソースに段を付けてみる(段=ネスト)
<div id="header-inner">
    <div id="ptitle" class="site-title">
        <a href="http://coolv9.yuzumaru.co.jp">
            <img src="http://coolv9.yuzumaru.co.jp/wp-content/themes/a9011/img/logo.png" alt="クールでかっこいいワードプレステーマVER9" title="クールでかっこいいワードプレステーマVER9">
        </a>
    </div>
    <div id="h-banner">
        <div class="textwidget">
            <a href="http://yuzumaru.x0.com/oncode/7DZpzx/" targe="_blank">
                <img src="http://coolv9.yuzumaru.co.jp/img/CoolLogo.png">
            </a>
        </div>
    </div>
    <div id="s-button">
    </div>
</div><!-- /#header_inner -->
<div id="gnav">
    <nav class="link">
           :
           :
logo.png って、ロゴの画像も表示しているし、その隣の CoolLogo.png も表示されているので、このブロックで間違いない。
よって、このブロックを削除?!
 

テーマを編集する

外観->テーマ編集
ワードプレスは、ヘッダー部分、ボディ部分、サイドバー部分、フッター部分と表示するモジュールがわかれている。
それぞれ、header.php , index.php , sidebar.php , footer.php 、その他にもアーカイブを表示するときのボディ、個別ページを表示する page.php 投稿記事を表示する single.php がある。
今回は、「たぶん」header.php の中にあるだろう・・・なかったらトップページの index.php の中にあるだろう。程度で探しにいく。
 
php のソースを探すときにの目印は、class とか id とかを目印にするといい。今回の場合は、<div id=”ptitle” class=”site-title”> が目印になりそうだ。
最初は、header-inner を探してその下。。。
<div id="header-inner">
<?php $options =  get_option('coolweb_logo_options'); $coolweb_logo = $options['image_upload']; ?>
<?php  if(!$coolweb_logo){$coolweb_logo = get_bloginfo('template_url').'/img/logo.png'; } ?>
<?php if(is_home()):?>
<h1 id="ptitle" class="site-title"><img src="<?php echo $coolweb_logo; ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>"></h1>
<?php else :?>
<div id="ptitle" class="site-title"><a href="<?php bloginfo('url'); ?>"><img src="<?php echo $coolweb_logo; ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>"></a></div>
<?php endif;?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('ヘッダーバナー') ) : ?>
<?php endif; ?>
<div id="s-button">
<?php if(get_option('feed_address')){echo '<a class="icon icon-feed" href="'.get_bloginfo('url').'/?feed=rss2"></a>';} ?>
<?php if(get_option('facebook_address')){echo '<a class="icon icon-facebook" href="'. esc_attr(get_option('facebook_address')).'" target="_blank"></a>';} ?>
<?php if(get_option('google_address')){echo '<a class="icon icon-gplus" href="'. esc_attr(get_option('google_address')).'" target="_blank"></a>';} ?>
<?php if(get_option('twitter_address')){echo '<a class="icon icon-twitter" href="'. esc_attr(get_option('twitter_address')).'" target="_blank"></a>';} ?>
</div>
</div><!-- /#header_inner -->
php のブロックは、<?php で始まり ?> で囲まれている。その中に if ~~ があれば、必ず対になる <php endif; ?> がある。それをひとくくりにして削除しないと php の文法エラーになる。
作業は、必ずバックアップをとって行うこと。失敗したらいつでも後戻りできるように。
 
今回は、簡単だ。コメントの <!– /#header_inner –> が目印になってくれている。
せっかくなので、目を凝らして、if と endif の対をチェックしてみよう。
わかりにくければネストを付けるといい。
<div id="header-inner">
    <?php $options =  get_option('coolweb_logo_options'); $coolweb_logo = $options['image_upload']; ?>
    <?php  if(!$coolweb_logo){$coolweb_logo = get_bloginfo('template_url').'/img/logo.png'; } ?>
    <?php if(is_home()):?>
        <h1 id="ptitle" class="site-title">
            <img src="<?php echo $coolweb_logo; ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>">
        </h1>
    <?php else :?>
        <div id="ptitle" class="site-title">
            <a href="<?php bloginfo('url'); ?>">
                <img src="<?php echo $coolweb_logo; ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>">
            </a>
        </div>
    <?php endif;?>

    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('ヘッダーバナー') ) : ?>
    <?php endif; ?>
    <div id="s-button">
        <?php if(get_option('feed_address')){echo '<a class="icon icon-feed" href="'.get_bloginfo('url').'/?feed=rss2"></a>';} ?>
        <?php if(get_option('facebook_address')){echo '<a class="icon icon-facebook" href="'. esc_attr(get_option('facebook_address')).'" target="_blank"></a>';} ?>
        <?php if(get_option('google_address')){echo '<a class="icon icon-gplus" href="'. esc_attr(get_option('google_address')).'" target="_blank"></a>';} ?>
        <?php if(get_option('twitter_address')){echo '<a class="icon icon-twitter" href="'. esc_attr(get_option('twitter_address')).'" target="_blank"></a>';} ?>
    </div>
</div><!-- /#header_inner -->
if は、 if(~~){ ・・・ } という書き方もできるので覚えておこう。以下がifの書き方のバリエーションだ。
if(~~){
}

if( ~~ ){
}else{
}

if( ~~ ):
endif;
 
if( ~~ ):
else;
endif;
前述のリバースさせた2行目~23行目までを削除するとロゴの入ったヘッダー部分は消える。
注意したいのは、ロゴブロックが高さを持っていた場合、表示内容だけが消えてしまう点。
削除して確認すべし。
 
div id=”header-inner” を残したのは、その確認の意味もあります。
header-inner クラスそのものが高さを持っている場合もあるし、別のもので高さを持っている場合もある。
高さを可変として扱っているのならば、ブロックの中身を消した時点で下にあるものが無条件でずり上がってくるはず。
そこを確認するために header-inner を残してみた。
 
style.css で header-inner を検索して height が設定されているか確認すればいい話でもあるんだけどね?w
 
header-inner に height が設定されていなくて、なをかつ空白があくのならば、グローバルメニューの位置を指定している可能性もある。
 
いずれにしても、ブロック内部を削除して、確認するのが先。
で、空白があくかどうか。(クールテーマはこの辺りあまり期待を裏切らずに、ペションとなってくれる場合が多い。削除だけでペションとならなければ、グローバルメニューの位置指定をしているはず。この辺りはクールテーマを何度となくカスタマイズしている経験から・・・
 
クールテンプレートのCSSデザイナーさんの考え方がわかれば、結構スムーズに作業できるようになる。
こういったCSSの作りは、CSSデザイナーさん次第だからね。
 
|<<Top | <PrevNext> | Last>>|