テーマ詳細

閲覧数: 42(0)

今回使用したテーマは「oblique」です。日本語では「斜めの、斜め方向の、傾いた」という意味です。名前の通り画面は斜めにカットされて傾いているように見えます。前回の記事でも書いた通り、今回は子テーマを作成するのではなく、画面構成は出来るだけ追加CSSで対応しています。

広告については、記事一覧画面(トップページ)と個別記事画面で表示するようにしています。記事一覧はcontent.phpを修正しています。個別記事はsingle.phpを修正しています。将来的には子テーマ化が望ましいかもしれません。スマホとタブレットは一緒にis_mobileと判定されてしまうため、mobbleプラグインでis_tabletを判定出来るようにしています。モバイルでは「短冊」が縦配列になるため、広告を一つのみ表示するためです。また、WindowsとMacでは横幅の扱いに違いがあり、レスポンシブ対応の中で$is_winIE変数を使って横幅設定を変えています。

まずは、一覧画面を生成する、content.phpです。

                <?php do_action( 'oblique_post_entry_content_bottom' ); ?>

                <?php
                global $is_winIE;
                if ( !$is_winIE ) { ?>

                <div class="single-post-svg" style="border-bottom:solid 1px #a6a6a6;text-align:center;font-size:14px;color:#a6a6a6;margin-bottom:20px">スポンサ>ーリンク</div>
                <div class="single-post-svg" style="text-align:center;display:flex;justify-content:space-around">
                <style>
                 .responsive_2 { width: 290px; height: 100px; }
                 @media(min-width: 300px) { .responsive_2 { width:300px;height: 250px; } }
                 @media(min-width: 468px) { .responsive_2 { width:468px;height: 60px; } }
                 @media(min-width: 600px) { .responsive_2 { width:240px;height: 200px; } }
                 @media(min-width: 1200px) { .responsive_2 { width:240px;height: 200px; } }
                </style>
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- responsive_2 -->
                <ins class="adsbygoogle  responsive_2"
                     style="display:inline-block"
                     data-ad-client="ca-pub-9709904800907040"
                     data-ad-slot="9973341612"></ins>
                <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
                </div>
                <?php } ?>

$is_winIEの場合は、レスポンシブの部分が以下のようになります。

                 @media(min-width: 300px) { .responsive_2 { width:300px;height: 250px; } }
                 @media(min-width: 468px) { .responsive_2 { width:468px;height: 60px; } }
                 @media(min-width: 600px) { .responsive_2 { width:240px;height: 200px; } }
                 @media(min-width: 800px) { .responsive_2 { width:300px;height: 250px; } }

選択記事の下部に広告を表示する設定は、single.phpへ以下のコードを挿入します。

                <?php endwhile; // end of the loop. ?>

<div class="single-post-svg" style="border-bottom:solid 1px #a6a6a6;text-align:center;font-size:14px;color:#a6a6a6;margin-bottom:20px">スポンサーリンク</div>
<div class="single-post-svg" style="text-align:center;display:flex;justify-content:space-around">
<style>
 .responsive_2 { width: 290px; height: 100px; }
 @media(min-width: 300px) { .responsive_2 { width:300px;height: 250px; } }
 @media(min-width: 468px) { .responsive_2 { width:468px;height: 60px; } }
 @media(min-width: 600px) { .responsive_2 { width:240px;height: 200px; } }
 @media(min-width: 8000px) { .responsive_2 { width:300px;height: 250px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- responsive_2 -->
<!-- responsive_2 -->
<ins class="adsbygoogle  responsive_2"
     style="display:inline-block"
     data-ad-client="ca-pub-9709904800907040"
     data-ad-slot="9973341612"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

二つ目以降の広告は、モバイル以外(PCかタブレット)のみ表示します。モバイルは一つ、PCとタブレットは三つ表示します。判定は以下の通り。

<?php if ( !wp_is_mobile() || is_tablet() ) { ?>

記事の下部にタグを表示していますが、文字ではなくアイコンで表示する設定は以下の通り。「genericon’d」というプラグインを使用してアイコンを表示しています。

$tags_list = get_the_tag_list( '', __( ', ', 'oblique' ) );
if ( $tags_list ) {
/* translators: Tags list */
printf( '<span class="tags-links">' . apply_filters( 'oblique_post_tags_message', __( '<span class="genericon genericon-tag tag"></span> %1$s', 'oblique' ) ) . '</span>', $tags_list );
}

最終更新日も入れるようにしました。テーマのtemplate-tags.phpに以下の関数を追加します。

if ( ! function_exists( 'oblique_updated_on' ) ) :
function oblique_updated_on() {
        if ( esc_html(get_the_date(ymd)) < esc_html(get_the_modified_date(ymd))) {
        $time_string = '<time class="entry-date-updated" <time class="updated" datetime="%3$s">最終更新日 %4$s</time>';
        }
        $time_string = sprintf( $time_string,
                esc_attr( get_the_date( 'c' ) ),
                esc_html( get_the_date()),
                esc_attr( get_the_modified_date( 'c' ) ),
                esc_html( get_the_modified_date() )
        );
        printf( __( '<span style="margin-right:10px" class="byline">%1$s</span>', 'oblique' ),
                sprintf( '<a href="%1$s" rel="bookmark">%2$s</a>',
                        esc_url( get_permalink() ),
                        $time_string
                )
        );
}
endif;

関数を追加する場所は、content-single.phpです。

        <footer class="entry-footer">
                <?php oblique_updated_on(); ?>
                <?php oblique_entry_footer(); ?>
                <?php pvc_post_views(); ?>

トップページで一覧表示の時に、抜粋記事のアイキャッチ画像をマウスオーバーした時に表示される「リンク」アイコンをAwesome FontからGenericon’dのクラシックアイコンに変更しました。

<span class="thumb-link">
<i class="fa fa-link"></i>
</span>
<span class="thumb-link">
<?php echo '<span class="genericon genericon-link link" style="font-size:38px"></span>';?>
</span>

テーマ標準では、リンクアイコンが斜めなのとフォントの太さなどがどうもセンスに合わず、気に入らないことによる変更です。センスに合うかどうかはあくまでも個人の感想ですw

カテゴリーIT閑話, 公開タグ,
関連記事
パンくずリスト詳細
2020年5月12日

テーマの「マイナーチェンジ」に伴って「パンくずリスト」の仕様を若干変更しました。一つ前のテーマではパ  続きを読む

カテゴリーを制限する
blank
2020年5月11日

過去に何度も書いた「カテゴリー制限」の話、元はと言えば初期に書かれた「非公開」の記事が原因です。トッ  続きを読む

マイナーチェンジ
blank
2020年3月23日

かれこれ一年近くほったらかしだったので、気合をいれて「テーマ変更」と思っていたのですが、、、いろいろ  続きを読む

6月の検索ワードまとめ
blank
2019年6月30日

6月の検索ワードのまとめです。 意外なところで「zabbixダウングレード」が複数回検索され、単独の  続きを読む

アクセシビリティ対策
blank
2019年6月23日

テーマカスタマイズの一環で、トップページに一覧表示されている「写真を左右交互に表示する」ようにした際  続きを読む

dockerとproxy
blank
2019年6月18日

dockerやdocker-composeをプロキシ環境下で使うのに苦労したので忘れないようにメモし  続きを読む

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください