はなゐろぐ

.envで変数を使う

2019.12.03 11:12

Wordmove向けにローカルと本番環境両方のDB情報を、Wordpress向けにその環境のDB情報を記載したかったので、下記のようにしました。本番環境の.envでは、${LOCAL_DB_XXXX}${PROD_DB_XXXX}に書き換えます。

LOCAL_DB_NAME=
LOCAL_DB_USER=
LOCAL_DB_PASSWORD=
LOCAL_DB_HOST=
PROD_DB_NAME=
PROD_DB_USER=
PROD_DB_PASSWORD=
PROD_DB_HOST=

# DB
DB_NAME=${LOCAL_DB_NAME}
DB_USER=${LOCAL_DB_USER}
DB_PASSWORD=${LOCAL_DB_PASSWORD}
DB_HOST=${LOCAL_DB_HOST}

Wordpressのアップロード画像サイズを変更

2019.12.02 10:12

追加

リサイズのパターンを追加する。既存のキーを指定すると上書きする。

// widthを指定した値に合わせて縦横比を維持したままリサイズする
add_image_size('thumbnail', 300);

// 短辺を300pxに合わせてリサイズし、はみ出した部分はトリミングする
add_image_size('thumbnail_square', 300, 300, true);

参照: 関数リファレンス/add image size - WordPress Codex 日本語版

デフォルトのパターンを削除

不要なリサイズを行わないようにする。

/**
 * デフォルトのリサイズを停止
 * @param  array $sizes サイズ名が格納された配列
 * @return array
 */
function remove_image_sizes($sizes) {
    unset($sizes['thumbnail']);
    unset($sizes['medium']);
    unset($sizes['large']);

    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'remove_image_sizes');

アイキャッチ画像デフォルトサイズを指定

the_post_thumbnail()で取得できるデフォルトのサイズを指定する。

// アイキャッチ画像のデフォルトサイズを指定
set_post_thumbnail_size(300);

参照: 関数リファレンス/set post thumbnail size - WordPress Codex 日本語版

Wordpressカスタムフィールドに入力した値でクエリを絞り込んだりソートしたりする

2019.10.31 10:10

日付

開始日(schedule_start)と終了日(schedule_end)の間に今日($today)が入っていれば記事を取得する。ちなみに、今回はサブフィールドをキーに指定するので、フィールド(schedule)とサブフィールド(start)をアンスコでつないで「schedule_start」にします。

$today = date('Ymd');
$query = new WP_Query([
  // 中略
  'meta_query' => array(
    'relation' => 'AND',
    [
      'key' => 'schedule_start',
      'compare' => '<=',
      'value' => $today,
      'type' => 'DATE'
    ],
    [
      'key' => 'schedule_end',
      'compare' => '>=',
      'value' => $today,
      'type' => 'DATE'
    ]
  )
]);

数値

金額(price)順にソートして取得する。カスタムフィールドをキーにソートするには'orderby' => 'meta_value'を使います。しかしこのままだと値が文字列として扱われ期待通りにソートされないので、'orderby' => 'meta_value_num'にします。

$query = new WP_Query([
  // 中略
  'orderby' => 'meta_value_num', // _num をつけることで数値としてソートされる
  'meta_key' => 'price',
  'order' => 'ASC',
  'meta_query' => [
    'relation' => 'AND',
    [
      'key' => 'price',
      'compare' => 'EXISTS',
    ]
  ]
]);

HEXOとhighlight.jsでシンタックスハイライトし、ついでにファイル名も表示する

2019.10.29 14:10

Qiitaのように、コードブロックにファイル名も表示します。HEXOが前提ですが、他のMarkdown記法のものなら応用がきくんじゃないでしょうか。

highlight.jsを読み込む

任意の場所でスクリプト本体とテーマCSSを読み込みます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/rainbow.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>

テーマCSSのデモはhighlight.js demoにあります。

また、highlight.min.jsはデモの「common」カテゴリの言語のみ対応のようなので、必要に応じてcdnjs.comから追加するとよいでしょう。例えばSCSSは含まれていないので、追加で読み込む必要があります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/languages/scss.min.js"></script>

モジュールとして読み込むこともできます。ドキュメントを見るに、言語を選んでコンパイルすることもできるようなので、環境によってはこっちのほうが良さそう。

コードブロックを書く

普通にコードブロックを記述します。ファイル名を表示したい場合は言語名のあとにコロンでつなげます。逆に何も指定しなくてもhighlight.jsが自動で言語を認識してくれます。

```php:functions.php
ここにコード
(後略)

すると、こんな感じで出力されると思います。

<pre><code class="php:functions.php">ここにコード(後略)</code></pre>

highlight.jsを使うには、言語名だけのクラス(ここではphp)にする必要があるので、Javascriptでなんとかします。クラスがなくても自動判定してくれるのですが、一応。

コードブロックのクラスを変更する

とりあえずこんな感じです。DOMContentLoadedのタイミングでページ内のクラス付きcode要素に対し、コロンがついていればそこで文字列を分割してクラスとdata属性にセットします。あとはhighlight.jsがよしなにしてくれます。

document.addEventListener('DOMContentLoaded', () => {
  // code要素にファイル名などを付与する
  var codes = document.querySelectorAll('code');
  if(codes){
    Array.prototype.slice.call(codes).forEach(function(item) {
      // クラスを取得
      var classes = item.classList;
      if(classes.length > 0){
        // ファイル名があればdata属性にセット
        if(classes[0].indexOf(':')){
          var values = classes[0].split(':');
          var filename = values[1];
          if(filename) item.setAttribute('data-filename', filename);
          // ファイル名を削除して言語クラスに変更する
          item.classList.remove(classes[0]);
          item.classList.add(values[0]);
        }
      }
    });
  }
});

// highlight.jsによるシンタックスハイライト
hljs.initHighlightingOnLoad();

コードブロックにファイル名を表示させる

コードブロックにdata-filename属性を付与したので、それをもとにCSSを書きます。

.hljs {
  position: relative;
  border-radius: 2px;
  overflow: hidden;

  &[data-filename] {
    // ファイル名を表示する時だけ上に余白をあける
    padding-top: 1.8em;

    // 疑似要素にファイル名を表示
    &::before {
      content: attr(data-filename);
      position: absolute;
      top: 0;
      right: 0;
      padding: 0 .3em;
      color: $font-color-default;
      font-size: .93em;
      background-color: rgba(#fff, .8);
      border-bottom-left-radius: 2px;
    }
  }
}

以上です!

123