WordPressで固定ページやフロントページなどによって処理内容や記述を変えたい場合があります。
そんな時に便利なよく使う条件分岐を記載しました。

   
     条件に当てはまる処理
   
     条件に当てはまらない処理
   

elseを省略して

     条件に当てはまる処理  　　

条件以外では何も処理をしたくない場合else文を省略して記述することも可能です。

またelseifを記述して

  投稿記事ではここの処理を適用

  固定ページではここの処理を適用

  投稿記事でも固定ページでもない場合に処理を実行

ifに当てはまらなかったときに、elseifの条件を判定してくれます。

複数の条件を組み合わせでは

ifの()内で、&&(かつ)と||(又は)を使って、2つ以上の条件を組み合わせることができます。

  投稿記事かつ固定ページのときに処理を実行



  投稿記事かつ固定ページのときに処理を実行

また、
下記のようにページによって条件を変えることが可能です。

FontAwesomeのWebフォントを背景として扱う場合:afterや:beforeなどの疑似要素を使用して使用する必要があります。

.bg 
{
  position: relative;
  color: #fff;
  text-align: center;
  line-height: 100px;
  font-size: 1.8em;
  background-color: #1da1f3;
  z-index: 1;
}
.bg:before 
{
  content: '\f099';
  position: absolute;
  top: 0;
  left: 50%;
  color: #71c9f8;
  font-size: 100px;
  font-family: fontAwesome;
  z-index: -1;
}

疑似クラスbg:beforeにはtwitterのuniコードである\f099をcontent: ‘\f099’;に記載し、
font-familyにfontAwesomeを指定してあげます。

ここで、font-familyには
Font Awesomeのverが 4 から 5 になり、フォントファイルが3つに分けられることになったので、

それが、下記の3つなので、
Brands
Regular
Solid

font-family: 'Font Awesome 5 Brands';
font-family: 'Font Awesome 5 Free';/*Solid か Regular のフォントを利用する場合*/

使いたいフォントファミリーの指定方法を変える必要があります。

overflow:scroll で長い文章をスクロールするように指定した場合、iOSだと挙動が遅く、カクついたりします。

このカクついたスクロールをなめらかにする方法があります。
それは「慣性スクロール」です。

慣性スクロールは、スマホなどのタッチデバイスで、画面をスクロールさせた際、指を画面から離しても急に止まらず、スクロールがある程度持続される機能のことです。

-webkit-overflow-scrolling を指定することによって、動きがスムーズになります。

-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;

MW WP Formのメールフォーム作成画面のバリデーション設定から必須項目にチェックを入れることができ、未入力の場合にエラーを表示するなどといったことが可能です。

その際に表示されるエラー文言を任意の文言に変更ことが可能です。

■functions.php

add_filter( 'mwform_error_message_mw-wp-form-○○○', 'custom_mwform_error_message', 10, 3 );
function custom_mwform_error_message( $error, $key, $rule ) {
  if ( $key === 'XXX' && $rule === 'noempty' ) {
    return '変更したいエラー文言';
  }
  return $error;
}

$key === ‘XXX’にはフォーム要素のname属性が入ります。
mw-wp-form-○○○にはメールフォームの自分が作成したフォームのkeyになります。

■linear-gradient

/* linear-gradient(to 終了位置, 開始色, 終了色) */
background: linear-gradient(to bottom, #FFFFFF, #F3F3F3);

アンドロイドや、 iOSに対応するために、webkitのベンダープレフィックス付きで記述する必要があります。

■linear-gradientで途中の色を指定する

/* linear-gradient(to 終了位置, 開始色, 途中色 位置, 終了色) */
background: linear-gradient(to bottom, #FFFFFF, #CCCCCC 30%, #333333);

■斜めにグラデーション
background: linear-gradient(45deg, #FFFFFF, #CCCCCC 30%, #333333);/* 45度右上にグラデーション */

■円形のグラデーション　radial-gradient
background: radial-gradient(left center 0deg, ellipse farthest-side, #FFFFFF, #CCCCCC 50px, #333333);

開始位置の初期値はcenterです。

left, right, top, bottomをpx, %の数値で指定できます。

							

HTML上で改行するには、「br要素」を使用します。
<br>と記述すれば、改行を行ってくれます。

ですが、IEでは「letter-spacing」を使うと、
二つ以上の改行タグを連続で記述しても１つしか改行されないバグがあります。

で改行（空行）をとっている場合、brタグに対してletter-spacingを、

br{
letter-spacing:0;
}

上記のようにbrタグにだけ、letter-spacingを0を設定すると解決できます。

小塚ゴシックをfont-familyで指定すると、ブラウザでの表示に少し問題が出てきます。

IEで見ると、文字が上付いて、レイアウトがずれてしまいます。

フォント上端からベースラインまでの高さが、IEではうまく計算されていないためです。

対処方法として考えられるのは、
@font-faceで源ノ角ゴシックなど日本語書体が小塚ゴシックと似たフォントをを読み込むなどの方法があります。

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

WordPressの投稿記事の表示順序を変えたいという場合があるかと思います。
投稿した記事は投稿日の新しい順番で表示されるようになっています。

上部に表示させたい記事の公開日時を、編集画面から順に修正していくのはとても時間のかかる作業です。

ですが、Intuitive Custom Post Orderというプラグインを使用すると並べ替えの作業が簡単にできてしまいます。

WordPress管理画面からIntuitive Custom Post Orderとプラグインを検索してインストールします。

プラグインをインストールして有効化すると「並び替え設定」という項目が追加されるので、並べ替えを行いたい投稿タイプを指定すると、ドラッグアンドドロップで記事の入れ替えができるようになっています。

同じカスタム投稿の同じタームの記事を取得する方法です。

アーカイブページ以外でpage.phpなどに表示させることが可能です。

ID, 'タクソノミー名')); 
 $args = array(
  'numberposts' => 5, //(8件表示の場合)
  'post_type' => 'カスタム投稿タイプ名', //カスタム投稿タイプ名
  'taxonomy' => 'タクソノミー名', //タクソノミー名
  'term' => $term->slug, //ターム名 
  'post__not_in' => array($post->ID)
 );
?>


 



 
投稿が見つかりません

左にテキスト、右に画像のサイトのデザインで、投稿画像が存在しない場合には、
文章の横幅を100%にする、その時々に合わせて、動的に調整する方法を紹介します。