kdcsライブラリー

以前、特定のカスタム投稿タイプの編集画面にあるacf入力フィールドについてcssを適用する方法（こちら）を書いたが、今回は全投稿タイプの投稿編集画面対象。

あらかじめcssフォルダ内に「custom-admin-acf.css」を作成しておく
※こちらの記述では固定ページ、投稿ページ共にcustom-admin-acf-cssが出力される
copilot

function custom_admin_styles() {
    $screen = get_current_screen();
    if ($screen->base === 'post') {
        wp_enqueue_style('custom-admin-acf-css', get_template_directory_uri() . '/css/custom-admin-acf.css');
    }
}
add_action('admin_enqueue_scripts', 'custom_admin_styles');

「投稿編集画面だけ」に限定したいので、get_current_screen() を使って画面の種類を判定

固定ページを除外したい場合
※こちらの記述では投稿ページのみcustom-admin-acf-cssが出力される

function custom_admin_styles() {
    $screen = get_current_screen();
    if ($screen->post_type !== 'page') {
        wp_enqueue_style('custom-admin-acf-css', get_template_directory_uri() . '/css/custom-admin-acf.css');
    }
}
add_action('admin_enqueue_scripts', 'custom_admin_styles');

custom-admin-acf.cssの記述
入力フィールドのdata-nameにフィールド名が入っているのでそれぞれ入力し、widthを!important指定する

/* inputの場合 */
div[data-name="フィールド名"] input {
width: 300px !important;
}
/* selectの場合 */
div[data-name="フィールド名"] select {
width: 300px !important;
}

advanced custom fieldsでテキストエリアの内容をリストタグで出力する方法

<?php
// ACFのフィールド名を指定
$text = get_field('your_field_name');

if ($text) {
    // 改行で分割（Windows環境なども考慮して\r\nも含める）
    $lines = preg_split('/\r\n|\r|\n/', $text);

    echo '<ul>';
    foreach ($lines as $line) {
        // 空行を除外し、余分な空白を除去してエスケープ
        if (trim($line) !== '') {
            echo '<li>' . esc_html(trim($line)) . '</li>';
        }
    }
    echo '</ul>';
}
?>

「preg_split(‘/\r\n|\r|\n/’, $text)」：改行コードの違いに対応（Windows, macOS, Linux）

「trim($line) !== ”」：空行を除外

「esc_html()」：HTMLエスケープで安全に出力

「ul」タグでリスト化

親要素にdisplay: flexを指定している中にある子要素はflexアイテムとなり、さまざまなプロパティが用意されている。

order … 順序の指定（子要素を任意の順で並べ替えられる）

flex-grow … 子要素の伸びる比率（初期値 0）
【 1 を指定すると、「余白があれば、その分だけ広がる」という意味になる】
flex-shrink … 子要素の縮む比率（初期値 1）
【 0 を指定すると、「絶対に縮まない」という意味になる】
flex-basis … 子要素のベースとなる幅の指定（初期値 auto）
【pxや%で指定する】

上記の3つは「flex-grow flex-shrink flex-basis」の順でまとめて指定できる
例：flex: 0 1 30%;

その他、
align-self … 子要素の垂直方向の揃え（初期値 auto）

flexを使ったレスポンシブレイアウトの例
asideの幅を全幅の30%で最小幅を250pxとし、残りのスペースをmainで使うという指定

html ---------------------------
<div id="wrapper">
<div class="contentBox">
<div class="main">main</div>
<div class="aside">aside</div>
</div>
</div>

css ----------------------------
#wrapper {
    max-width: 1240px;
    width: 100%;
}
.contentBox {
    display: flex;
    flex-wrap: wrap;
}
.main {
    flex: 1; /* aside指定値(flexやmin-width)以外で伸縮 */
    min-width: 0; /* オーバーフロー防止 */
}
.aside {
    flex: 0 0 30%; /* 初期値・縮まない・幅30%を基本に */
    min-width: 250px; /* 最小幅を250pxに固定 */
}

メディアクエリでモバイル対応させる場合
※contentBox内を縦表示にしてmainとasideの幅を100%にする

@media (max-width: 780px) {
.contentBox {
  flex-direction: column;
  }
#main, .main {
  width:100%;
  min-width: unset;
  flex: 0;
  }
#aside {
  width: 100%;
  min-width: unset;
  flex: 0 1 auto;
  }
}

時間のある時に学習するための備忘録

パララックススライダーrendered.js修正前はスライド完了後にページネーションが更新されるようになっていたが、これをスライドと同じタイミングで動かしたい。

以下が修正のポイント

現在のコードでは、.pagination の check イベントがスライド完了後に trigger(‘check’) されて、そこで .item に is-active クラスが付与されます。つまり、アニメーションが終わった後にページネーションが更新される仕組みです。

スライドの動きと同時に is-active を付与するには？ slideshowSwitch 関数内で、アニメーションの開始直後に .pagination .item の is-active を更新するようにすれば、スライドと同時にページネーションも切り替わります。

以下のように、アニメーション開始前にページネーションの更新処理を追加します。

// スライド切り替えの直前にページネーションを更新
var index = newSlide.index();
pages.removeClass('is-active');
pages.eq(index).addClass('is-active');

このコードを slideshowSwitch 関数内の、アニメーション開始前（例えば TweenMax.to(…) の前）に追加してください。たとえば fade トランジションの場合はこのあたり。

if (transition == 'fade') {
  // ページネーションを即時更新
  var index = newSlide.index();
  pages.removeClass('is-active');
  pages.eq(index).addClass('is-active');

  newSlide.css({
    display: 'block',
    zIndex: 2
  });
  ...

同様に、fade 以外のスライドアニメーションでも、TweenMax.to(…) の前に同じ処理を入れればOKです。

Advanced Custom Fieldsのテキストエリアをテーブルとして使う方法

PHP 8.3では、null を文字列関数に渡すことが非推奨になっているので「null チェック」を入れる必要がある

テーブルはthとtdの2列だけで、行は何行になってもOK。thとtdの値は半角の@（アットマーク）で区切る
※当初：（コロン）で区切っていたが時間表示でコロンが使われる可能性があるので＠に変更した

<?php
// データを取得（nullの可能性がある）
$field = get_field('catering_option') ?? '';

// 連続した改行を1つの改行にまとめる
$field = preg_replace('/(\n|\r|\r\n)+/us', '\n', $field);
// もし全角の：があれば半角の:に変換する
$field = str_replace('＠', '@', $field);

// 1行ごとに<tr>、「＠」で<th>と<td>に区切る
echo '<table>
    <tr>
        <th>' .
        str_replace(
            array('\n', '@'),
            array('</td></tr><tr><th>', '</th><td>'),
            $field
        ) .
        '</td>
    </tr>
</table>';
?>

これに以下の処理を追加
・＠を付けない行はテーブルのセルtdを結合する処理を行う（colspan=”2″）
・結合したtdにclass=”td_comment”を付ける
・空の行は無視する

<?php
$field = get_field('catering_info') ?? '';
$field = preg_replace('/(\n|\r|\r\n)+/us', "\n", $field);
$field = str_replace('＠', '@', $field);

$lines = explode("\n", $field);
echo '<table>';
foreach ($lines as $line) {
    $line = trim($line);
    if ($line === '') {
        continue;
    }

    echo '<tr>';
    if (strpos($line, '@') !== false) {
        list($th, $td) = explode('@', $line, 2);
        echo '<th>' . htmlspecialchars($th) . '</th>';
        echo '<td>' . htmlspecialchars($td) . '</td>';
    } else {
        // class="td_comment" を追加
        echo '<td colspan="2" class="td_comment">' . htmlspecialchars($line) . '</td>';
    }
    echo '</tr>';
}
echo '</table>';
?>