関連記事で現在のページを除外するWordPressループの引数の指定方法

関連記事を出力するWordPressループで、現在のページを関連記事に表示させないような引数の指定方法。

‘post__not_in’オプションを使用することで実現できる。

<?php
$currentID = get_the_ID();
$my_query = new WP_Query( array('cat' => '1', 'showposts' => '5', 'post__not_in' => array($currentID)));
while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title() ?></a></h2>
<?php the_content(); ?>
<?php endwhile; ?>

参考:Exclude current post from WP Query

オプションタグ(option)で初期表示させる項目を選択できないようにする方法

オプションタグで最初に表示させる項目は、ラベルのようなもので実際には選択されないようにするための方法。

最初のoptionを使って、valueを空にし、selected disabled hiddenをoptionタグ内に入力すれば実現できる。

<select>
  <option value="" selected disabled hidden>選択肢を選ぶ</option>
  <option value="1">項目A</option>
  <option value="2">項目B</option>
  <option value="3">項目C</option>
  <option value="4">項目D</option>
  <option value="5">項目E</option>
</select>

参考:How can I set the default value for an HTML <select> element?

tbodyタグは省略可能かどうか【W3Cの和訳あり】

tbodyタグは省略可能か。結論から言うと、table要素内い表が1つしかなければ省略可能。以下詳細説明。

このtbodyタグはテーブルの本体に当たるコンテンツを囲むために使われる。特にtableタグで囲む表が複数に渡る場合、thead、tfootを追加(テーブル内のheader、footerの役割)してテーブルに関する情報を入れ、実際のテーブル本体をtbodyで囲む。

W3Cを参照すると、表が1つしかなく、thead、tfootタグを使わない場合は、tbodyタグを省略することが可能。以下W3Cの説明箇所のスクショ。

そしてなんとこのthead、tfoot、tbodyは閉じタグはオプションとなっている。下記のように開始タグのみで書くことが可能。

ということで、複数の表を1つのtable内で使わず、1つの表のみであればtbodyタグは省略可能である。

参考:The World Wide Web Consortium, 11 Tables

 

selectタグに::before ::afterなどの疑似要素を追加する方法【CSS】

結論から言うとselectタグには::beforeや::afterの疑似要素を当てることはできない。

そのためselectタグの親要素に擬似要素を指定して代用する。

<div class="search-pref">
  <select name="pref[]">
    <option>都道府県</option>
    <optgroup label="北海道・東北">
      <option value="1">北海道</option>
      <option value="2">青森県</option>
      <option value="3">岩手県</option>
      <option value="4">宮城県</option>
      <option value="5">秋田県</option>
      <option value="6">山形県</option>
      <option value="7">福島県</option>
    </optgroup>
    <optgroup label="関東">
      <option value="8">茨城県</option>
      <option value="9">栃木県</option>
      <option value="10">群馬県</option>
      <option value="11">埼玉県</option>
      <option value="12">千葉県</option>
      <option value="13">東京都</option>
      <option value="14">神奈川県</option>
    </optgroup>      
  </select>
</div>

このような構成だった場合、

.search-pref::before {
 /* スタイル */
}

このように親要素に擬似要素を付けて調整する。

参考:Pseudo elements and SELECT tag

nodebrewでnode.jsをインストールする時にxcrunでerrorが出る問題を解決

標題通り、nodebrewでnode.jsの別バージョンをインストールする時に以下のエラーが出た。

xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

xcrun: error: unable to lookup item 'PlatformPath' from command line tools installation
xcrun: error: unable to lookup item 'PlatformPath' in SDK '/'

で、node.jsが正常にインストールされない。

xcodeがインストールされてない、もしくはコマンドラインツールが正常に動作していないエラーらしい。

解決方法は以下のコマンドを打ち込む

xcode-select --install
xcode-select --switch /Applications/Xcode.app

 

【即解決】WordPressのショートコードがpタグで囲まれてしまうのを最も簡単に除去する方法

WordPressの自作ショートコードを設定した時に、ショートコードの次に改行を入れて文章を入力するとpタグによって囲まれることがある。

そのような時の解決方法。以下のコードをfunctions.phpに挿入する。

remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop', 99 );
add_filter( 'the_content', 'shortcode_unautop', 100 );

他にもいろいろごちゃごちゃコードを書く方法があるけど、これが一番シンプル。

ショートコードの時だけpタグの自動挿入をしないように設定している。

参考:remove empty <p> tags from wordpress shortcodes via a php functon

さらに空のpタグを除去する方法はこちらのコードで除去が可能。

function tgm_io_shortcode_empty_paragraph_fix( $content ) {
 
    $array = array(
        '<p>['    => '[',
        ']</p>'   => ']',
        ']<br />' => ']'
    );
    return strtr( $content, $array );
 
}
add_filter( 'the_content', 'tgm_io_shortcode_empty_paragraph_fix' );

参考:How To Remove Empty Paragraph Tags From Shortcodes In WordPress

.gitignoreが反映されない時の対応方法

.gitignoreにファイル・フォルダを追加したにも関わらずgit addに表示されてしまう時。

gitがキャッシュを保持している場合がある。そんな時はgitのキャッシュを消そう。

全てのキャッシュをクリアするには、

$ git rm -r --cached .

ファイル名・フォルダを指定してキャッシュをクリアするには、

$ git rm -r --cached 'ファイル名'

でキャッシュをクリアできる。

CSSのみでposition:absoluteがかかっている要素を上下中央配置にする

position:absoluteで浮いている要素を上下中央配置にするやり方。

昔は大変だったが、今ではflexboxを使えば簡単にできる。キーは子要素にdisplay:flexをかけて、縦方向に中心いするためにflex-direction:column、align-items: center;にし、さらにwidthとheightに100%をかける。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

幅と高さがない場合中央配置にならないため注意。

単純に中央配置にするだけなら、flexboxを使わなくても実現可能。leftとrightをどちらも0を指定するだけ。

.parent {
  position: relative;
}

.child {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
}

こちらも幅の指定をしないと中央配置にならないため注意。