Wordpressカスタマイズ:IsleMag
備忘録。
テーマIsleMag
子テーマ作成
子テーマを作ろうとするも、自分で作成は上手くいかず。
Wordpress.orgのwikiとIsleMagでの子テーマ作成のページを参照。どちらもstyleが引き継げず。
Child Themesというプラグインを使って解決。(中身は似たようなものなんだけどな…)
日付表記の変更
日付表示が22 7月となっていたため、2017-7-22表記に変更。
content-template1.php content-template2.php content-template3.php content-template4.php slider-posts.php の5つのデータの( ‘j M’ )を('Y-m-d')に変更
参考ページ
http://affiliate-de.com/%E3%80%8Cislemag%E3%80%8D%E3%81%AE%E6%8A%95%E7%A8%BF%E6%97%A5%E8%A1%A8%E7%A4%BA%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B
footerの余白調整
子テーマのstyle.cssを編集して
#footer-inner { padding:0; }
としたことで、フッターに余計な余白ができなくなるように調整。
フッター上部の、広告やウィジェットを入れられるエリアを削除。
参考:なし
footerの文字調整
footer.phpでフッターの文字を入れ替えた。
islemag_footer_container_head();
islemag_footer_content();
islemag_footer_container_bottom();
<?php islemag_footer_container_head();?> <div style="margin-left:20px;"> Copyright © <?php bloginfo( 'name' ); ?> 2011 - <?php echo date( 'Y' ); ?> All Rights Reserved. </div> <?php islemag_footer_container_bottom();?>
と修正。
divで位置調整 ブログ名と今年の年を引っ張ってきて Copyright © むきゅ~LOGS 2011 - 2017 All Rights Reserved. と表記される
参考ページ
https://shiritai.net/islemag/#i-4
footerのリンク調整
さっきのやり方だとSNSリンクが消えてしまったので入れるために調整。
(結局全部直してるのでさっきのはあんまり役に立たなかった…)
inc/extras.php内の関数islemag_footerが悪さをしている様子。
islemag_footer_contentが実行された際にislemag_footerが追加で実行される。
islemag_footerの中身は大きく分けて二つ。
テーマ名等が入る部分と、SNSメニューを入れる部分。
テーマ名の部分をコピーライトに変えれば大丈夫と判断。
inc/extras.phpをそのまま編集してもよかったけれど、functions.phpでislemag_footerを上書きする方法で対応。
inc/extras.phpからfunctions.phpにislemag_footerの記述を持ってきて
if ( ! function_exists( 'islemag_footer' ) ) { /*Display footer function. */ function islemag_footer() { ?> <div class="col-md-8 col-md-push-4 islemag-footer-menu"> <?php $defaults = array( 'theme_location' => 'islemag-footer', 'fallback_cb' => false, 'items_wrap' => '<ul class="footer-menu" id="%1$s"class="%2$s">%3$s</ul>', 'depth' => 1, ); wp_nav_menu( $defaults ); ?> </div><!-- End .col-md-6 --> <div class="col-md-4 col-md-pull-8 powerdby"> <?php printf( /* translators: 1 - Theme name , 2 - WordPress link */ __( '%1$s powered by %2$s', 'islemag' ), sprintf( '<a href="https://themeisle.com/themes/islemag/" rel="nofollow">%s</a>',esc_html__( 'Islemag', 'islemag' ) ), sprintf( '<a href="http://wordpress.org/" rel="nofollow">%s</a>', esc_html__( 'WordPress', 'islemag' ) ) ); ?> </div><!-- End .col-md-6 --> <?php } } add_action( 'islemag_footer_content','islemag_footer' );
を編集していく。
<?php printf( /* translators: 1 - Theme name , 2 - WordPress link */ __( '%1$s powered by %2$s', 'islemag' ), sprintf( '<a href="https://themeisle.com/themes/islemag/" rel="nofollow">%s</a>', esc_html__( 'Islemag', 'islemag' ) ), sprintf( '<a href="http://wordpress.org/" rel="nofollow">%s</a>', esc_html__( 'WordPress', 'islemag' ) ) ); ?>
の部分を先ほどの
<div style=”margin-left:20px;”> Copyright © <?php bloginfo( ‘name’ ); ?> 2011 - <?php echo date( ‘Y’ ); ?> All Rights Reserved. </div>
に変更。
なぜか謎の改行がされる…
おそらく変更部分をかこっているdivのclassが悪いことしてるな。
<div class="col-md-4 col-md-pull-8 powerdby">
この人たちを探そう。
色々探してみたところ、col-md-4やcol-pull-8などは、それぞれlrftやwidthなどに%で対応しているものらしい。
もとからいくつも用意されていて、状況に応じて数字を変えて作れるようになっているみたい。
8は66%、4は33%らしい。50%にしたかったので、ここを6に変更。
左右両方、50%の大きさで、それぞれ左右50%の位置に置くように設定。
<div class="col-md-4 col-md-pull-8 powerdby"> <div class="col-md-8 col-md-push-4 islemag-footer-menu">
この二つのタグを
<div class="col-md-6 col-md-pull-6 powerdby"> <div class="col-md-6 col-md-push-6 islemag-footer-menu">
こうするだけでよかった様子。
こうすることでwidth:50%;left:50%;とwidth:50%;right:50%に設定される様子。
なるほどね。
タイトルと見出しのデザインの修正
style.cssに以下を追記。
.post .entry-title{ border-left: solid 6px orange; border-bottom: solid 2px #DDDDDD; background: linear-gradient(transparent 0, #F7F7F7 0); padding:10px; } .entry-content h2{border-left: solid 6px orange; padding:10px;}
とりあえずこんなもんかな