【CSS】効率的なコーディング作業02(CSSの圧縮と整形)

CSSを手打ちで書いていくと、癖や非効率な記述や記述揺れなども多く発生します。
そのままでもブラウザでの表示には問題ありませんが、
少しでもコードをキレイにしておきたいものです。

CSSの圧縮や整形を活用することで、
効率的にコードを一定の状態に保てます。

エディターの標準機能や拡張機能などでも実現できますが、
Webサービスで簡単に出来るもの。

探すといくつかありますが、
以下のものが使いやすいと思います。

■CSSの圧縮
https://syncer.jp/css-minifier

■CSSの整形
https://lab.syncer.jp/Tool/CSS-PrettyPrint/

圧縮は全コードを一括ではなく、
ブロックごとにコピペを繰り返していくとメンテナンス性を保つことが出来ます。

整形は全てをまとめてコピペで大丈夫です。

効率的なコーディング作業01(CSSのアウトライン生成)
生成したCSSだと使わない空のセレクタもあるので、これも削除せずそのまま整形すると

div {
}

div {}

こうなるので{}をエディターで検索して
空の行を削除していくと不要なコードを除けます。

【CSS】効率的なコーディング作業01(CSSのアウトライン生成)

HTMLを記述して、そのコードを下記のサイトにコピー&ペーストして
CSSのアウトラインを生成することができます。

OneClickCSS

私の場合は「Childrens CSS」を使います。
下記のHTMLを貼り付け「Childrens CSS」ボタンをクリック。

<div class="box">
  <img src="./photo.jpg" alt="test photo" class="photo">
  <p class="txt">text sample text sample</p>
  <p class="cmt">comment sample comment sample</p>
</div>

下記のようなCSSが生成されます。

div.box {
}
div.box img.photo {
}
div.box p.txt {
}
div.box p.cmt {
}

エディターでdivを削除していくと余分なコードを省けます。

.box {
}
.box img.photo {
}
.box p.txt {
}
.box p.cmt {
}

場合によってはimgpも削除しても良いです。
(残しておいたほうがHTMLの構造が分かりやすい場合もあります。)

セレクタの命名にdivを含めない(例:diveやdivingなど)ようにしておくと、divを一斉置換で削除でき、より効率的なコーディング作業が実現できます。

【WordPress】記事詳細ページに関連記事一覧のリンクを設置

記事詳細ページに関連記事一覧のリンクを設置する方法。

下記のコードで同じカテゴリーの記事を呼び出します。

<?php
  $categories = get_the_category();
  $category_ID = array();
  foreach($categories as $category):
    array_push( $category_ID, $category -> cat_ID);
  endforeach ;
  $args = array(
    'post__not_in' => array($post -> ID),
    'posts_per_page'=> 3,
    'category__in' => $category_ID,
    'orderby' => 'rand',
  );
  $query = new WP_Query($args); 
?>

posts_per_pageが記事の取得件数になります。「3」を「5」に変更すると最大5件表示されます。

記事のカテゴリーが複数選択されている場合、「AもしくはB」で取得されます。(AとB両方)

'orderby' => 'rand','orderby' => 'date','order' => 'DESC',に変更すると新着順、'orderby' => 'date','order' => 'ASC',にすると古い順になります。

orderbyのパラメータは、その他にも以下のようなオプションがあります。

date 投稿日時による並び替え(デフォルト)
title タイトルによる並び替え
name スラッグによる並び替え
modified 最終更新日時による並び替え
parent 親投稿のIDによる並び替え
rand ランダムに並び替え
comment_count コメント数による並び替え
menu_order メニュー順による並び替え(ページの場合のみ)
meta_value カスタムフィールドの値による並び替え
meta_value_num カスタムフィールドの数値値による並び替え

下記のコードで関連記事一覧のリンクを書き出します。(設置したい場所に、表示したいHTMLで設置する。)

<?php if( $query -> have_posts() ): while ($query -> have_posts()): $query -> the_post(); ?>
  <a href="<?php the_permalink() ?>">
    <?php the_title(); ?>
  </a>
<?php endwhile; else:?>
  <p>関連記事はありません</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

実際にこのページにも設置しているのでご確認ください。(HTMLやCSSは調整しています。)

参考:https://tamatuf.net/wordpress/wordpress-category-in-article/


【English】英語の勉強(NHKラジオ英会話 英会話 話を組み立てるパワーフレーズ トレーニング編)

年明けてから新年に「今年は○○をしよう!」とそこから準備するとなかなか実行できないことが多いので年末の今のうちに準備。

英語の勉強を再開しよう再開しようと思っていて、なかなか出来ていなかったので、この本がクリスマスセールで半額になっていたので今のうち購入
(2022.12.23現在で660円)

NHKでよく講師をされてる大西泰斗先生は「英語をイメージでつかもう」というコンセプトで「単語の意味を詳細に覚えて…」という受験英語的な勉強方法じゃないから、英語を聞いてイメージを思い浮かべる(ザックリ内容を理解)というのにはすごく向いていると思う。

講義編もあるからコチラも安くなったタイミングで購入しようかな?

音声がないけど「英語のイメージをザックリ網羅的に…」というのには
ハートで感じる英文法 決定版」こちらも結構良い。クリスマスセールで半額以下というのもあるし(2022.12.23現在で825円)

【WordPress】ソースコードを本文にそのまま挿入する方法(Highlighting Code Block)

ソースコードを本文にそのまま挿入したい場合
プラグインの「Highlighting Code Block」を
WordPressにインストールします。

Highlighting Code Block

Highlighting Code Block

ブロックエディターで使用するのが使いやすい。
(個人的には…普段はクラシックエディターが使いやすい。)

投稿画面のブロック追加から「Highlighting Code Block」を選択して
表示された枠(ブロック)にソースコードをそのまま入力します。

こちらのページで実際に使っているので
表示のされ方など参考にしてみてください。

参考:https://webnetamemo.com/coding/wordpress/2021040610576

【jQuery】バナーのランダム表示

jQueryでバナーをランダム表示したい場合、
headerに
<script type="text/javascript">
  jQuery(function($) {
    $.fn.extend({
      randomdisplay: function(num) {
        return this.each(function() {
          var chn = $(this).children().hide().length;
          for (var i = 0; i < num && i < chn; i++) {
            var r = parseInt(Math.random() * (chn - i)) + i;
            $(this).children().eq(r).show().prependTo($(this));
          }
        });
      }
    });
    $(function() {
      $("[randomdisplay]").each(function() {
        $(this).randomdisplay($(this).attr("randomdisplay"));
      });
    });
  });
</script>

htmlは
<ul class="randomdisplay" randomdisplay="3">
    <li>~</li>
</ul>

randomdisplayの数字を変更することで表示するバナーの数を変更できます。(この場合3枚表示)

このサイトのサイドバー(PC)やヘッダー(SP)で実際に使っているのでリロードしてランダム表示されることを試してみてください。

参考:https://web-omusubi.com/blog/omusubi75.html
【jQuery参考書】
■初級・入門向け
10日でおぼえるjQuery入門教室 第2版

■中級・実務向け
jQueryポケットリファレンス (POCKET REFERENCE)

■上級・開発向け
jQueryクックブック(オライリー)

【WordPress】AWS LightrailサーバーでのWP CSV Exporterプラグイン

AWS LightrailサーバーでWordPressのプラグイン
WP CSV Exporterを使おうとすると、そのままのインストールでは
500エラーで動作しません。

プラグインフォルダ内(wp-content→plugins)の
wp-csv-exporter→admin→download.php

2行目の
require_once '../../../../wp-load.php';

require_once '/opt/bitnami/wordpress/wp-load.php';
に修正します。

AWSに限らず、
wp-load.phpの場所がデフォルトと異なる場合、
修正が必要になります。
(AWSの場合、正確にはwp-contentの位置がデフォルトから変更されていると言えるかも。)