STINGER7 本文部分のカスタマイズ まとめ
2016/07/02
メインのカスタマイズになります。 細かいところへのカスタマイズ まぁこだわりとかもありますが自分好みにできることが楽しいですよね。 今回はコードのカスタマイズになります。 本文中にある例えば 目次だったり コードを入力する方法などは プラグインで説明しますね。
にほんブログ村Contents (目次)
メインの改造
メインの部分 記事とかコメントとか 初期設定の２カラムで右にサイドバーがある場合の中央のカスタマイズです。 細かいこだわりとか色々とできますので記載してきます。
ただここからはプラグインも同時にインストールすることもありますので コードの書き込み以外の作業も新たにチャレンジってことになりますね。
記事中の 見出し ｈ２ ｈ３ ｈ４ のカスタマイズ
えーっと GINの設定を下にズラッと
-
ｈ２
-
ｈ３
-
ｈ４
こんな感じですかね。 スミマセン 手抜きな記事でページ上部の目次がちょっとおかしくなっちゃってますかね。 ゴメンなさい。 見た目はこんな感じで見出しの設定しています。
今 GINのまんまコピーのコードになります。style.cssの一番下にコピーしてください。
数字や＃●●●●●●の色なんかを変えたり 私のｈ２の見出しは□が２つ重なってるのだけど その指定は h2:before と h2:after でその□の前後の位置関係とズレ表示 大きさ 色 などを指定しているので その辺をいじってみてくださいませ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
/*見出しのカスタマイズ*/ h2{ position: relative; font-size: 20px; font-weight: bold; margin: 0 0 1.5em; padding: 0.5em 0.5em 0.5em 2.5em; border-bottom: 3px solid #3498db; background: #fff; } h2:before{ content: "□"; font-size: 120%; position: absolute; color: #3498db; top: -0.5em; left: 0.2em; height: 12px; width: 12px; border-top: 10px solid #fff; } h2:after{ content: "□"; font-size: 120%; position: absolute; color: #3498db; top: -0.2em; left: -0.3em; height: 12px; width: 12px; border-top: 10px solid #fff; } .post h3 { background: #fff; color: #333; padding: .5em 0; border-top: 2px solid #3498db; border-bottom: 4px solid #3498db; font-size: 18px; } .post h4 { background: #fff; border-bottom: 1px solid #3498db; color: #333; font-size: 16px; } /*ここまで*/ |
参照したページはこちらです。
ページをスクロールした時の右下に出るアイコンを変える
先ず最初に プラグインを導入します。
しかもこのプラグインは他のものにも応用可能なので是非インストールしておきましょう。
左側メニュー プラグイン→新規追加 で 「Font Awesome 4 Menus」と入力してください。 すると該当プラグインが先頭に出てくると思うので 今すぐインストール をクリックすると即インストールされます。 インストールが終わると画面に プラグインを有効化 と表示されているのでそこをクリック。 これでこのプラグインが使用できます。
えっと この Font Awesome 4 Menus というプラグインは 主にアイコンを使用することに特化してるプラグインで こちらのリンク(http://fontawesome.io/icons/) を見るとアイコンがズラリ。 これらのアイコンを使用できるので視認性がアップします。 試しになんでもいいのでリンク先のページのアイコンをクリックすると アイコンの表示と
|
1 |
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"・・・・・・・・"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span> |
という表示が出ると思います。 (・・・・部はアイコンのファイル名)
で 自分のページで使用したいアイコンを使用するときは この ・・・・ の部分しか使いません。 それ以外の部分は不必要なのでご注意ください。 まぁ都度説明があると思うので大丈夫だと思けど・・。
さてプラグインのインストールが終わったらアイコンですね。
画面を下にスクロールしたときの右下に出る 上へ戻る の矢印です。
これを自分の気に入ったアイコンにFont Awesome 4 Menusから選ぶ ということ。 長文を説明するよりも GINはまんま以下を参考にコピペしたので参照してくださいませ。
メニューにアイコンを入れて視認性アップ
実はですね。 こちらも Font Awesome 4 Menus のアイコンを使用するのでプラグインついでにご紹介です。
えーっとですね。 こちらも参考にさせていただいたページがあるのだけど 実はそのページだけでは不十分で ？？？？ ってのがしばらくあって 笑 STINGER7 の初期設定とでも言いますが その設定をしないと現れない表示があってちょっと苦労？というか困惑しました。
とりあえず文章でさら～っと書きますと 先ずメニューをカスタマイズするので 右側の 外観 → メニュー でメニュー設定ページを開きます。
左に 固定ページ 投稿 カスタムメニュー カテゴリー の４つ と右側にメニューの構造の設定があると思いますが メニューにアイコンを入れるには 左の カスタムメニューを利用します。
表示の通り メニューをクリックしたときの行き先のリンクを設定し メニューに表示させる文字を入力し メニュー追加ボタン でメニューが追加されます。 例えば ホームへ戻る の場合
URL http://wp.ginbkk.com/wp-gin/
リンク文字列 HOME
というような設定にすれば HOME と表示され リンク先(移動先)は私のページの記事一覧にリンクされるということ。
でメニュー追加ボタンを押すと 右側のメニューの構造に新たに追加したメニューが表示されているかと思います。 その新たに追加したメニューの右側に小さな▼がありますね？ そこをクリックすると先ほど設定した内容が表示されます。 何故か リンク文字列→ナビゲーションラベル に 笑
まぁそれは感覚的にわかるのでいいのだけど ここからが問題。 メニューにアイコンを設定したいのだけど どこにアイコン設定のコードを入力するか？ ってこと。
STINGER７の初期設定の場合 URL と ナビゲーションラベル しか表示されてないと思う。 実はそれではアイコンのコードを設置することができなんです。
CSS class(オプション)という入力表示が表示されるはずがされない。 ←ここ苦労した？！ 苦笑
えーっとですね。 そのメニュー設定画面を一番上まで表示する状態にスクロールすると右上に現れてくる表示 表示オプション ヘルプ ありますね？ この表示オプションの▼をクリックしてください。 するとそこに表示する項目がでてきます。 ありましたね？ cssクラスって？？ ここにチェックを入れてください。 これでアイコンを表示させるコードを入力できるようになりました。 意外と盲点？ 私だけ？？
参考にさせていただいたページはこちら 図解されてるので分かりやすい。
※訂正！20160702 フッターのコピーライトと固定ページを削除
※消えないじゃん という話を小耳に見直したら 紹介したstyle.cssの部分に間違いが 汗 お気づきの方も多いかと思いますが */ こいつが間違ってました 汗 ごめんなさい この色文字が訂正追記です。
ご自身のページの一番下 コピーライトがあると思うのだけど STINGER7 の場合は固定ページへのリンクもあったり STINGERと記載があったりでちょっと自分のページっぽくなかったりします。 ってことでその表示をいじります。
Before Copyright© GIN バンコク 霊能者 , 2016 All Rights Reserved.powerd by STINGER
After Copyright© 2016 GIN バンコク 霊能者
コピーライトについては諸説あるみたいだけど ぶっちゃけ無くてもいいくらいのもので 習慣だったりするみたいですね。 まぁこれがあるとページらしいというかそういうのもあるみたい。 特段罰則があるわけじゃなく 決まりも微妙みたいです。 特に All Rights・・・ は要らないみたい。
ということでシンプルにまとめました。
ということで footer.php に以下をまんまコピーしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<footer id="footer"> <?php get_template_part( 'st-footer-link' ); //フッターリンク ?> <h3> <?php if ( is_home() or is_front_page() ) { ?> <!-- ロゴ又はブログ名 --> <?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?> <img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>" > <?php else: //ロゴ画像が無い時 ?> <?php echo esc_attr( get_bloginfo( 'name' ) ); ?> <?php endif; ?> <?php } else { ?> <?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>" ></a> <?php else: //ロゴ画像が無い時 ?> <?php st_wp_title( '' ); ?> <?php endif; ?> <?php } ?> </h3> <p> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'description' ); ?></a> </p> <?php get_template_part( 'st-header-widget' ); //電話番号とヘッダー用ウィジェット ?> <p class="copy">Copyright© <?php echo date( 'Y' ); ?> <?php bloginfo( 'name' ); ?> </p> </footer> </div> <!-- /#wrapper --> <!-- ページトップへ戻る --> <div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div> <!-- ページトップへ戻る 終わり --> <?php wp_enqueue_script( 'base', get_template_directory_uri() . '/js/base.js', array() ); ?> <?php if ( st_is_mobile() ) { //PCのみ追尾広告のjs読み込み ?> <?php } else { ?> <?php wp_enqueue_script( 'scroll', get_template_directory_uri() . '/js/scroll.js', array() ); ?> <?php } ?> <?php wp_footer(); ?> </body></html> |
変更したのは２４行～２６行で 2016 という年号をサイト名の前に持ってきて All Rights Reserved. を削除しました。 STINGERの文字とリンクはCSS で対応します。
powerd by STINGERの文字とリンクを見えなくします。
テーマの本体をいじるよりも見えなくすることで 子テーマで対応できるからです。
以下をstyle.cssの一番下にコピペしてくださいませ。
以下は間違い
|
1 2 3 4 5 6 7 8 9 |
/* powerd by STINGERの文字 */ /* フッター固定ページ .footermenust { display: none; }*/ #footer .copy a, #footer .rcopy a { display: none; } /*文字ここまで*/ |
こちらが正解
|
1 2 3 4 5 6 7 8 9 |
/* powerd by STINGERの文字 */ /* フッター固定ページ */ .footermenust { display: none; } #footer .copy a, #footer .rcopy a { display: none; } /*文字ここまで*/ |
５行目の ｝ の後ろに */ があったので定位置 /* フッター固定ページ */ に移動。
凡ミス・・・ スミマセン。
心の底ではENJILOGさんが制作してコピーライトとして 宣伝という意味でも残した方がいいのか と気にはなりますが 心の底で感謝しつつ自分ページとして表現することを選択。
こういった対応になりました。
この記事をアップしたらまさかのステ子さん(ステ子＠STINGER公式)にRTしていただきまして恐縮です。 ますます恐縮の限りです。。。 ありがとうございます。
コメント入力欄を自分流にカスタマイズ
STINGERの初期設定のままでもいいのだけど 色や雰囲気を自分のページにマッチさせたいですよね。 ということで参照ページも含めてご紹介。
さて今回追加するのはfunctions.phpなのだけど これが非常に重要かつ ちょっとへまをするとWordPressにアクセスすらできなくなってしまうphp。 なので余計なことをせず 以下をコピペでOKですのでさっさと作業を終わらせます 笑
因みに私は画面が真っ白になり その後「あなたのページは存在しません」と表示されビビリました。。。 私のそのときの対処はFTPソフトで弄ったfunctions.phpをダウンロードして中身を書き直して という対応をしました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
/* コメント欄の改造 */ function costom_comment($comment, $args, $depth) { $GLOBALS['comment'] = $comment; ?> <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>"> <div id="comment-<?php comment_ID(); ?>"> <div class="comment-listCon"> <span class="comment-name"> <?php printf(__('<cite class="fn">%s</cite> <span class="says">より:</span>'), get_comment_author_link()) ?> </span> <span class="comment-date-edit"> <?php comment_date('Y/m/d(D)');?> <?php comment_time();?> <?php edit_comment_link(__('Edit'),' ','') ?> </span> <?php if ($comment->comment_approved == '0') : ?> <em><?php _e('Your comment is awaiting moderation.') ?></em><br /> <?php endif; ?> <?php comment_text() ?> </div> </div> <?php } function move_comment_field( $fields ) { $comment_field = $fields['comment']; unset( $fields['comment'] ); $fields['comment'] = $comment_field; return $fields; } add_filter( 'comment_form_fields', 'move_comment_field' ); function dequeue_devicepx() { wp_dequeue_script( 'devicepx' ); } add_action( 'wp_enqueue_scripts', 'dequeue_devicepx', 20 ); /*カテゴリーのカスタマイズ*/ function theme_list_categories( $output, $args ) { $replaced_text = preg_replace('/<\/a> \(([0-9,]*)\)/', ' <span class="count">${1}</span></a>', $output); if($replaced_text != NULL) { return $replaced_text; } else { return $output; } } add_filter( 'wp_list_categories', 'theme_list_categories', 10, 2 ); |
次にcomments.phpになります。
コピペしてほしいのですが これまで私が説明しているのは子テーマ内に親テーマからのphpをコピーしている前提で話を進めていますので今更ですがそこをご理解とご了承くださいね。
で 子テーマ内にあるcomments.phpってのは親テーマからのコピーだと思いますが 中身を全消ししていただいて 以下をコピペしていただきたいです。 削除ではなくて上書きでもいいのだけど 万が一上書き指定でなにかしらトラブルがあると先に進まないので前者の方法をオススメします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<hr class="hrcss" /> <div id="comments"> <?php if ( have_comments() ): ?> <h5 id="resp"><i class="fa fa-comments"></i> comment</h5> <ul class="commets-list"> <?php wp_list_comments( 'callback=costom_comment' ); ?> </ul> <?php endif; $args = array( 'title_reply' =>'<i class="fa fa-pencil-square-o"></i>Message', 'fields' => array( 'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' . '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>', 'email' => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' . '<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>', 'url' => '', ), 'label_submit' => __( 'コメントを送信' ), ); comment_form( $args ); ?> </div> <?php if( $wp_query -> max_num_comment_pages > 1 ): ?> <div class="st-pagelink"> <?php $args = array( 'prev_text' => '« Prev', 'next_text' => 'Next »', ); paginate_comments_links($args); ?> </div> <?php endif; ?> <!-- END singer --> |
さて最後に style.cssへの入力で見た目を整えます。
既に私は導入してるので以下は私のコメント欄と同じ と言うことになります。 色や数字はご自身の好みへと変えてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
/*コメント欄の改造*/ #comments { /* コメント欄全体の枠 */ margin-top: 20px; background: #e8e8e8; border: 2px solid #6fa5e3; } h5#resp { /* コメントがあった時の見出し */ font-size: 20px; color: #6fa5e3; } h3#reply-title { /* コメント入力欄の見出し */ font-size: 20px; color: #6fa5e3; } .comment-listCon { /* コメント毎のボックス */ margin-bottom: 40px; } .comment-name .fn { /* コメントした人の名前 */ font-size: 16px; font-weight: bold; color: #666; } .comment-name .says { /* 「より：」の部分 */ font-size: 16px; font-weight: bold; color: #666; } .comment-date-edit { /* 「日付」とログイン者が見れる「編集」の部分 */ font-size: 16px; font-weight: bold; color: #666; } #comments input[type="submit"] { /* 送信ボタン */ background: #6fa5e3; color: #fff; border-radius: 3px; padding: 10px; } @media only screen and (max-width: 413px) { /* スマホで日付を改行して文字サイズ変更 */ .comment-date-edit { font-size: 12px; display: block; } } |
参照ページはこちら
うぇぶあしびアイキャッチ画像を記事に表示する設定
STINGER７の記事を編集 または新規追加で書いているときに設定できるアイキャッチ このアイキャッチは結構大事で 百聞は一見にしかずじゃないけど連想できる関連する画像をつけておくと一目瞭然という優れもの そんな画像を記事ごとに設定できるようになっています。
でその画像は記事一覧などの表示の際には表示するのだけど 今回の設定で そのアイキャッチで使用している画像を本文の一番上に表示させようというもの
先ず single.php の中にコードを追加します。
既に書かれている内容で以下の一文を見つけてください。
|
1 |
<?php the_content(); //本文 ?> |
見つかったら この一文の前の行に以下を追加してください。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- ここからアイキャッチ画像 --> <div class="post-thumbnail"> <?php the_post_thumbnail('full');?> </div> <!-- ここまでアイキャッチ画像 --> <!-- ここからキャプション --> <div class="post-thumbnail-credit"> <?php echo get_post( get_post_thumbnail_id() )->post_excerpt;?> </div> <!-- ここまでキャプション --> |
これでとりあえずアイキャッチ画像が本文の先頭に表示されているかと思います。
次にstyle.cssで位置と大きさの調整をします。 今のままだと左より且つ大きさがアイキャッチ画像ごとにバラバラになるかもしれないのでね。 以下のコードをstyle.cssの一番下にコピペしてください。
|
1 2 3 4 5 6 7 8 9 10 11 |
/*アイキャッチ画像本文内位置調整*/ .post-thumbnail{ margin-bottom: 15px; } .post-thumbnail img{ margin: 0 auto; width: auto; max-height: 300px; } /*ここまで*/ |
これでどうかな？
大きさは高さを制限してます。 横幅は高さ制限に左右されます。
現在の設定は300pxです。
本文 のカスタマイズ まとめ
これ以外にもチョコチョコと細々やってますが 見た目を大きく変える と言う意味で色々と紹介しました。 といってもほとんど他の方からの引用なんですけどね。 助かります。
さて 後はグーグルAdsens グーグルアナリティスク のコツ？ そんなことを書いてみます。時間かかりますが待ってやってください。
この後の記事の事になりますが徐々に霊能者寄り、タイ情報へ移行してゆきます 笑
本業の記事かかないとね 汗
Word Press の記事というのは 自身の忘備録でもあるのですが ご参考になれば嬉しいです。
シェアされると非常に嬉しいです ありがとうございます！