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’)に変更

参考ページ

「IsleMag」の投稿日表示を変更する

 

footerの余白調整

子テーマのstyle.cssを編集して

#footer-inner { padding:0; }

としたことで、フッターに余計な余白ができなくなるように調整。

フッター上部の、広告やウィジェットを入れられるエリアを削除。

参考:なし

 

footerの文字調整

footer.phpでフッターの文字を入れ替えた。

<?php

islemag_footer_container_head();

islemag_footer_content();

islemag_footer_container_bottom();?>

となっていたのを

<?php islemag_footer_container_head();?>

<div style=”margin-left:20px;”> Copyright &copy;  <?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.

と表記される

参考ページ

WPテーマ「IsleMag」の使い方!

 

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 &copy;  <?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;}

とりあえずこんなもんかな

投稿者: kidm9

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です