pxをvwに変換する計算方法

cssにはcalc機能がついているので、デザインから画像サイズ等々をvwに計算する計算方法を見つけたのでメモ。

px÷画面サイズ×100=vw

上記で計算できるようです。
いろんなサイトを見て、色んな方法があるようですが、こちらが簡単だったので。

ACFのデイトピッカーの出力フォーマット

ACFのデイトピッカーをいろんな出力フォーマットに変換する方法です。
(ACFとはWordpressでよく使われている、Advanced Custom Fieldsというプラグインの略です)

<?php
$date = date_create(get_field('フィールド名'));
echo date_format($date,'Y/m/d');
?>

上記以外にもいろいろとサイトに合わせて変更してみてください。
(’Y/m/d’の部分をデザインに合わせて変更してみてください)

WordPress 同じページに検索を2つ設置する場合

WordPressでは以下のタグを入れると標準の検索フォームを設置することができます。
<?php get_search_form(); ?>
このタグは下記のようなHTMLになります。

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div>
<label class="screen-reader-text" for="s">検索</label>
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="検索">
</div>
</form>

上記タグを見るとidが使われているため、同じページに2つ設置するとエラーになります。
そこで下記の方法で設置するとidを使わずに設置することができます。

searchform.phpの設置

カスタマイズでフォームを作ります。
その方法はsearchform.phpというphp作成します。
idを使わずにclassで対応すると複数設置が可能です。
下記が参考例文です。
デザインに合わせてボタンに変更したり、クラスを追加したりして自由に変更できます。

<form role="search" method="get" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label class="screen-reader-text" for="s">検索</label>
<input type="text" placeholder="検索" value="<?php echo get_search_query(); ?>" name="s" />
<input type="submit" class="searchsubmit" value="検索" />
</form>

制作の際、気をつけないといけないことは以下の3点です。

  • formのaction属性にはWordpressのホームURLを設定すること
  • formのmethodはgetにすること
  • inputのname属性をsに設定

searchform.phpを制作すると、タグを記載したHTMLがこちらに置き換わります。

function.phpにて設定する場合

以下のコードを追加すると、検索フォームをHTML5に対応し、idがなくなりclassでの表示になります。
そのため、検索フォームを同じページに複数設置してもエラーになることはありません。

add_theme_support( 'html5', array( 'search-form' ) );

こちらのほうがお手軽で簡単かもしれません。

お好みに応じて使い分けると良いかもしれません。

詳しくは WordPress Codex に記載してますのでご確認ください。

WordPress タイトルタグの挿入方法

WordPressではタイトルタグをfunction.phpに記入します。
うっかりそのことを忘れてheader.phpとfunciotn.phpの両方に記入すると2重で表示されてしまうのでお気をつけください。

function.phpの書き方はとっても簡単。

add_theme_support( ‘title-tag’ );

たったこれだけです。
ただオリジナルでは「ページのタイトル – サイト名」といった形で表示されます。

いろいろとカスタマイズしたい場合は以下のサイトに詳しく記載されているので参考にされてみては?

WordPress title タグの出力