
## TL;DR

流行りを取り入れ、デザインの基本原則や配色などルールを守っているのに、パッとしないレイアウトになる。それは論理的にデザインを捉えてないからです。今回はユーザーが理解しやすい Web デザインのレイアウトを作る法則を書きました。

## 論理的に考えるサイトデザインの法則

論理的思考をデザインにあてはめると、誰が何と言おうと以下のようになります。

- ファーストビューに主張があること
- デザインに根拠がある（なぜ、斜めなのか。なぜ、スプリットスクリーンなのか）
- サイト全体を通して、意味がつながっていること

僕が実践しているレイアウト構築方法を解説していきます。

### ファーストビューに主張がある

スクロールせずに見える範囲の写真やキャッチコピーに理解しやすい主張があること。ここでいう主張とは結論のことです。ファーストビューだけで「何が言いたいのか」理解できないと、混乱を招きます。

ただ「かっこいい」「流行っている」という理由だけでデザインを取り入れていると、意味の通らないファーストビューになります。

ユーザーはサイトの言わんとしていることを推測し、分かりやすく言い換えて理解します。造り手側はユーザーの理解の手間を軽減してあげることが必要です。ウェブデザインとはアートではなくて、伝えることでもあるので結論を理解しやすい形で表現すべきです。

### Why 思考で根拠を確認

例えば「なぜ、明るめの配色にしたのか？」と問うと過去に向けて原因を探ることができるし、「なぜ、ここで余白を取るのか？」と問うと未来への目的を再確認することができます。当たり前のことなんですが、デザイン構築の途中段階で何度も Why 思考を行う癖をつけておくと、違和感のないデザインに向かうことができます。

「なぜ、スプリットスクリーンにするのか？なぜ、余白をとるのか？」・・・と聞かれたときに、説明できるか、説明しなくてもユーザーが根拠を理解できるか。

### 要望に対してすぐに YES と言わないこと

クライアントさんに「スライダーをつけてくれ」と言われたとして、そのまま YES で進めてはいけません。根拠なく思いつきで希望している場合もあるからです。問題そのものに問題がないか、Why 思考で対応すべきです。

クライアント「スライダーつけて」

✕ → どんなスライダーにしたいですか？  
○ → なぜ、スライダーをつけたいのですか？

### サイト全体を通して、意味がつながっていること

サイト全体を通して「統一感のあるデザイン」になっているか、飛躍したデザインが混じってないか。会話と同じで筋道を立てた構成になっているか。

デザインだけでなく、フォント・配色・文章も飛躍していないかチェックしてください。チェックの方法は「唐突に無関係な ○○」が出てきていないかです。

### ロジカルに文章を書く秘術

文章はどのように構築するのか？SEO 対策優先か、ユーザビリティ優先か、デザインに添ったものにするのか。

優先順位は色々あるかと思いますが、いかなる場合も共通して、全ての文章を流れるように読ませるには「全体の文章は最初の数行を次々に言い換えたもの」にしておくことが重要です。

原理的には一行読んだところで、後は言い換えになるから繋がっているし、ユーザーは労せずして大体理解できるというわけです。

### 抽象化の視点でチェックすること

作り込んだ細部を組み合わせた後に、全体をみると何やら違和感を感じることがあります。これは、抽象化してチェックしていないからです。抽象化とは、特徴を大まかにとらえることです。枝葉を切り捨てざっくり考える。全体像を掴むことで、今まで気づかなかったことを気づけるようになります。

抽象化の癖をつけておくと「色々な機能を取り入れよう」という考え方ではなく、「この機能は削っても問題ない」という考え方ができるようになります。

### トレンドは帰納的に発見し、優先順位に気をつける

帰納とは共通点から一般法則や結論を見つけること。例えば「ハチ公は嬉しいと尻尾を振る、スヌーピーも嬉しいと尻尾をふる」→「犬は嬉しいと尻尾をふる」といった感じ。同じようにトレンドも帰納法で発見することができるんですが、コンセプトからずれるようであれば無理に取り入れる必要はありません。

とはいえ、サイトにおいては、ユーザー視点が最優先されるべきなので、トレンドの優先順位が 1 位であってはならないです。成果物に対して、クライアントさんの反応が薄いときは、トレンド優先になっている可能性があります。

### 最後はパトス

アリストテレスは、人を動かすには 3 つ必要だと言っています。

- ロジック（ロゴス）
- 倫理（エトス）
- 情熱（パトス）

論理だけでは人は動かんということですね。

情熱を産み出す秘術を教えましょう。お客さんの業種に興味がないときは、その業種の本を数冊買ってザッと読んで、ノートにメモしていくと次第に興味が出てきて楽しくなります。つまり、興味は知から生まれる。知らないから興味が湧かない。

最終的には「興味持って作った！」という情熱がユーザーにも伝わるので、レトリックやロジックだけで終わらないように楽しんでデザインしましょう！


流行りを取り入れ、デザインの基本原則や配色などルールを守っているのに、パッとしないレイアウトになる。それは論理的にデザインを捉えてないからです。今回はユーザー

論理的Webデザインの法則

## TL;DR

問い合わせフォームの中に、前ページの情報をデフォルトで埋め込んでおきたい、郵便番号を入力したら住所を取得して自動で入力させたい、そんなときに便利な WordPress プラグイン「MW WP Form」の使い方。

### MW WP Form

WordPress の問い合わせフォームといえば「Contact Form 7」を使う人が多いかと思いますが、WordPress プラグインである「MW WP Form」を使うと、前のページの情報を引き継いで、フォーム内に埋め込んでおくことが簡単にできます。 例えば、カスタムポストに識別番号をカスタムフィールドで設定しておき、そのページから問い合わせフォームに遷移すると、問い合わせフォーム内に遷移前ページの識別番号を付与し、送信後もメールにその情報を送ることができます。 [MW WP Form](https://ja.wordpress.org/plugins/mw-wp-form/) 他に以下のように、入力画面と確認画面の URL を別にするなどの便利な機能があります。

- バリデーション
- ハイフン区切りの電話番号・郵便番号
- 確認画面・完了画面（サンクスページ測定）・エラー画面 URL の設定
- ページ遷移前の情報を引き継げる
- 問い合わせデータを保存・ダウンロードできる
- 郵便番号入力ライブラリと組み合わせ可能である

#### 取得できる情報

パラメータ（?post_id=投稿 ID）をつけておけば、以下のように$post - 投稿情報の戻り値をショートコードで取得できます。カスタムフィールドの値は{カスタムフィールド名}のようにそのまま記述します。

```bash
作成者:{post_author}
投稿日時:{post_date}
カテゴリー:{post_category}
スラッグ:{post_name}
投稿タイプ:{post_type}
カスタムフィールドの値:{カスタムフィールド名}
```

編集画面で「URL 引数を有効にする」にチェックを入れると、?post_id=投稿 ID 付きで表示したさいに、投稿のタイトルやカスタムフィールドの値を取得できます。 フォームへ遷移する前の投稿ページのループ外に、問い合わせフォームへのパラメータを付与しましょう。「xxxx」の箇所はフォームを設置したパラメータを入れる。例えば、お問い合わせページの URL が contact だったら、「xxxx」は contact にする。

```php
<a href="<?php echo esc_url(home_url('/')); ?>xxxx?post_id=<?php echo $post->ID ?>">お問い合わせ</a>
```

### 郵便番号で住所を自動入力する機能

MW WP Form に郵便番号で住所を自動入力する機能をつけたいので、郵便番号入力ライブラリである、[yubinbango](https://github.com/yubinbango/yubinbango)を使います。 **※ 2021/12/21 追記： 最新バージョンの WordPress で、郵便番号の自動入力が動かない場合は、WordPress の デフォルト jQuery を削除し、jQuery のバージョンを上げると動く場合がある。**

functions.php

デフォルト jQuery を削除

```php
function delete_jquery() {
  if (!is_admin()) {
    wp_deregister_script('jquery');
  }
}
add_action('init', 'delete_jquery');

```

header.php jquery-1.12.4 を wp_head() の上に記述。

```js

<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
```

functions.php で追加します。

```php
// MW WP Form
function register_jquery() {
wp_enqueue_script(
'yubin-js',
'https://yubinbango.github.io/yubinbango/yubinbango.js',
array(),
null,
true
);
wp_enqueue_script('yubin-js');
}
add_action('wp_enqueue_scripts', 'register_jquery');
```

管理画面の中で form にクラス名を付与しても、自動で削除されてしまうので、form タグにクラス名（h-adr）を付与するために、functions.php でクラス名を変更します。これで form にクラス名が付与され、正常に動作するようになります。

```php
// MW WP Form の form 部分の class を設定できるようにショートコードの引数を追加
function mwform_form_class() {
?>
<script>
jQuery(function($) {
    $( '.mw_wp_form form' ).attr( 'class', 'h-adr' );
});
</script>
<?php
}
add_action( 'wp_head', 'mwform_form_class', 10000 );
```

`[MW WP Form で出力される内にクラスを指定したい | WordPress.org](https://ja.wordpress.org/support/topic/mw-wp-form%e3%81%a7%e5%87%ba%e5%8a%9b%e3%81%95%e3%82%8c%e3%82%8b%e5%86%85%e3%81%ab%e3%82%af%e3%83%a9%e3%82%b9%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%97%e3%81%9f%e3%81%84/)

### フォーム埋め込み

「MW WP Form」をインストール後、新規作成でフォーム編集画面に移動し、以下のように記述します。取得番号の箇所に書いてある{mw-wp-form}は、カスタムフィールドで設定したものを記述すればよいです。

```html
<span class="p-country-name" style="display:none;">Japan</span>
<table class="contact-table">
  <tbody>
    <tr>
      <th>お名前</th>
      <td>[mwform_text name="name" size="60"]</td>
    </tr>
    <tr>
      <th>取得番号</th>
      <td>[mwform_text name="mw-wp-form" size="60" value="{mw-wp-form}"]</td>
    </tr>
    <tr>
      <th>取得タイトル</th>
      <td>[mwform_text name="title" size="60" value="{post_title}"]</td>
    </tr>
    <tr>
      <th>郵便番号</th>
      <td>[mwform_text name="yubin-number" class="p-postal-code" size="60"]</td>
    </tr>
    <tr>
      <th>都道府県</th>
      <td>[mwform_text name="todoufuken" class="p-region p-locality p-street-address p-extended-address" size="60"]</td>
    </tr>
    <tr>
      <th>メールアドレス</th>
      <td>[mwform_text name="email" size="60"]</td>
    </tr>
    <tr>
      <th>お問い合わせ内容</th>
      <td>[mwform_textarea name="message" cols="60"]</td>
    </tr>
    <tr>
      <th></th>
      <td>[mwform_submitButton name="mwform_submitButton-772" class="btn" confirm_value="確認画面へ" submit_value="送信する"]</td>
    </tr>
  </tbody>
</table>
```

これで、郵便番号を入力するだけで住所が自動表示されます。 [ショートコード一覧](https://plugins.2inc.org/mw-wp-form/manual/shortcode/)

### 自動返信メール

編集画面で、自動返信メール設定と管理者宛てメールに以下を追加。

```php
お名前：{name}
取得番号：{mw-wp-form}
取得タイトル：{title}
郵便番号：{yubin-number}
住所：{your-address}
メールアドレス：{email}
お問い合わせ内容：{message}
```

お客様へ送る、自動返信メールのところには、この場合「email」と入力してください。以上、WordPress プラグイン「MW WP Form」の使い方と住所自動入力の設定方法でした。`

問い合わせフォームの中に、前ページの情報をデフォルトで埋め込んでおきたい、郵便番号を入力したら住所を取得して自動で入力させたい、そんなときに便利なWordPr

WordPressプラグイン「MW WP Form」の使い方と住所自動入力（郵便番号で動かない場合）


## TL;DR

分からないことがあったらすぐに検索して、簡単に専門家レベルのコードや知識を入手することができるようにはなったけど、どうも「深く考える力」が無くなっているような気がします。

これはいかんということで、今年は自己啓発書・ハウツー・プログラミング・ビジネスの類は一切読まずに、熟考できるような本を中心に読むようにしています。ということで今回は、考える力が必要とされるプログラマーこそ読んでもらいたい「論理的に考える力」「抽象化する力」を鍛える本をまとめました。速読せずにディープ・リーディング（深い読み）し、思考回路を作りましょう。

### 地頭力を鍛える

##### 細谷功

- [Amazon](https://amzn.to/2PEH5h7)
- [Kindle](https://amzn.to/2QU3wv6)

グーグルの社員採用試験として知られているフェルミ推定について興味があったので読んだ。フェルミ推定というのは、数量化が難しいものに対して「あたり」をつけロジカルに答えを導くための思考法。「東京に信号機は何基あるか？」など、把握することが難しい数量について、ロジックを用い、短時間で概数を求める方法などが書かれていた。少ない情報から高次の視点で答えを推測する訓練になる。表面的なことではなく根本的要因を探り、真の問題解決につなげる、仮説から答えを導く思考力がつく。

他に、高次の視点から問題点を発見する抽象化、類推（アナロジー）を用いて推測する力、要約のように本質を捉える考え方などが書かれていて、主に問題解決に使えるコンサルタントにおいても力を発揮するかもしれない。

### メタ思考トレーニング

##### 細谷功

- [Amazon](https://amzn.to/2zhM111)
- [Kindle](https://amzn.to/2PEHxvP)

メタ思考とは、物事を一つ上の視点から眺める抽象的な思考法。アナロジーとは類似のものから推論すること。常識を疑い、無知の知を認識するにはどうすればよいのか、どう類推していくのか。この本はメタ思考を強化するための練習問題が挟まれており、受動的に読めないようになっている。自己中心的なバイアスを薄め、他人の言葉の真意を汲み取る力をつけるためにも読んでおきたい。

### パンセ

##### パスカル

- [Amazon](https://amzn.to/2QRghGQ)
- [Kindle](https://amzn.to/2PC6Iif)

高校の時に偏差値 110 を越えて京都大学法学部に現役で受かった同級生に、デカルトの話をしたらパスカル（パンセ）とフーコーを推薦されたので読んでみた。

ヘクトパスカルという単位や幾何学などパスカルは数学・力学で業績を残す。デカルトの幾何学の精神に繊細な精神を対置する。遺著であるパンセは思考を意味し、パスカルが考えたことがまとめてある。といっても宗教色が強い。「人間は考える葦である」という有名な言葉もパンセの中でパスカルが残した言葉で、人間の中間的存在（神と動物）を表現した。机に置いておいて何度でも読めそうな本。

##### ミシェル・フーコー 地の考古学

- [Amazon](https://amzn.to/2QNKE0U)
- [Kindle](https://amzn.to/2zdxaV9)

### 方法序説

##### デカルト

- [Amazon](https://amzn.to/2zfdqkj)
- [Kindle](https://amzn.to/2S0yku9)

哲学者デカルトが 1637 年に発表した方法序説。正式なタイトルは「理性を正しく導き、学問において真理を探求するための方法」。学問において問題を解決する方法論、モラルとは何か、形而上学（簡単にいうと哲学）についてなどが述べられていて、今日の学問の基本的な基準となる哲学の原理と方法が示される。

方法序説で示された哲学は、学問以外にも応用することができる論理的な基本原理といわれている。形而上学の章での「我思う故に我あり」という有名な言葉は、全てを疑って迷って途方に暮れていたときに「わたしは考える、ゆえにわたしは存在している」という自己肯定を示した。

### 論理哲学論考

##### ウィトゲンシュタイン

- [Amazon](https://amzn.to/2PCxes2)
- [Kindle](https://amzn.to/2KgigSE)

ウィトゲンシュタインはウィーンで生まれた哲学者。哲学問題は全て解決したと思い哲学を離れるが、再び哲学活動を開始する。「およそ語られうることは明晰に語られうる。そして論じえないことについては、ひとは沈黙せねばならない。」から始まる明晰な哲学書。

答えが無いもの、形而上学（哲学）について語るべきではないと一括。そして「どれだけのことを考えることができるのか？」という問題を思考によって答えるのは難しいと述べた上で、言語と論理を見極め思考の限界を示そうとする。本書で頻繁に登場する言葉（事実：現実性、事態：可能性）、（像：事実を描いたもの）（定項：定数、変項：変数）などを抑えておくと読みやすい。

### 東大入試に学ぶロジカルライティング

##### 吉岡友治

- [Amazon](https://amzn.to/2PAxNme)

自分の感じたことを述べるのは感想と言い、同じ内容をやさしく言い直すことを説明という。理解とは具体的な表現に基づいて、筆者の言わんとしていることを推測し、事態をクリアにし、分かりやすく言い換えること。論理的文章は最初の前提を次々に言い換えたもの。

この本はロースクールの問題を題材に、ロジカルな文章を書けるように構成されている。読むだけでなく、本当に理解しているのか実際に紙に書き出してアウトプットしていくことにより論理的思考が強化される。設問攻略の手法には「難問は分割して、理解せよ」というデカルトの原理も使われている。自分の思考との違いを明確にするために、読み流すのではなく紙に書き出して、進めていくと理解が深まる。

### 入門！論理学

##### 野矢茂樹

- [Amazon](https://amzn.to/2ToFBWk)
- [Kindle](https://amzn.to/2PBxyY5)

論理学というのがさっぱりわからないから読んでみた。論理学で使う記号はほとんど使われていないから初心者でも理解しやすい。推測と推論の違い、演繹（前提を認めたら、必ず結論も認めなければならないような導出）など論理学が扱う対象を学べる。そもそも論理学の本というのは論理的に書かれているから、読んで理解することで論理トレーニングになる。そんなわけで、本書に出てきた言葉を覚えるよりも、理解しながら読むことが大切。

「言葉と言葉をきちんと関係づけて使うひとは論理的であり、脈絡なく発言する人は非論理的」と書いてあることから、思いつきで書いている私のような文章は非論理的なんです。

### 本を読む本

##### M・アドラー

- [Amazon](https://amzn.to/2TsMzd0)

良書を知的に読む技術に留まるだけでなく、本を理解し論証・批評する道筋を示し、能動的に本を読み熟考する重要性が書かれてある。本を読むときは理解するだけではなく、熟考することが大切。読書における熟考とは準備・理解・論証を行ったうえで、批評があるならば、賛成反論の根拠を明確に指摘し理由を述べることである。このことから、熟考には時間がかかるものであり、速読や乱読は情報を増やすことができても、知識を深めたり、思考能力を高めることはできない。

自分で答えを探し考えることこそ人間的な読書。この本のテーマは「深く考えること」である。受動的に読書するだけでは理解したとはいえない。論証と批評を論理的に明示し、熟考してこそ積極的読書といえる。

### 思考の整理学

##### 外山 滋比古

- [Amazon](https://amzn.to/2S0QufA)
- [Kindle](https://amzn.to/2zbeqWs)

受動的に知識を得るだけのグライダー人間はコンピューターに仕事を奪われる。知識を得たうえで能動的にものごとを考える人間になるには、どういうことを心がければよいのか。この本は、能動的にアイデアを生み出す方法、思考を深めるための技術や考察が書かれているが、大切なのは、あとがきで筆者が「ハウツー本にならないようした」と記してあることからも分かるように、技術や方法より「思考」の重要性を述べてある点。

### 今世紀で人類は終わる？

##### マーティン・リース

- [Amazon](https://amzn.to/2ziMDn1)

ケンブリッジ大学 宇宙論・宇宙物理学教授、宇宙物理学の世界的権威であるマーティン・リースが、テクノロジーが引き起こすかもしれない世界滅亡までのシナリオを述べる。近年、世界を滅ぼす要因となるものは核だけでない。また、国家だけでない。個人でも合成可能な人工ウィルス、ナノマシン増殖による大陸壊滅もある。加速器実験により作り出されるストレンジレットは触れたもの全てを奇妙な物質に変え、地球を 100 メートルの大きさに圧縮、最悪のシナリオで宇宙全体に影響を及ぼす可能性もある。

将来バイオやサイバー技術の力は大きくなり大きな利益がもたらされる反面、危険や倫理問題もつきまとう。史上最大の危機にひんする今、私達はなにを配慮しなにをすべきなのか。近年テクノロジーを国家から個人が扱えるようになった。これは昔より一層危険が身近になったということを示しており、大惨事になる前に科学者や個人は何をすべきか考えるべきである。

### 第三のチンパンジー

##### ジャレド・ダイアモンド

- [Amazon](https://amzn.to/2RV5afW)

この本のテーマは「人間とはどんな生き物か」ということ。人間の起源から滅亡に至るまで、生物学的視点、歴史と地理をふまえ言及。人間の原始的な行動や性質を、これまでの歴史と照らし合わせながら解説。生物の究極的な資質は「生存」であり、人間は遺伝子以外にも情報や文化を存続させていく高度な生物である。

この本によって、地理と環境によって人間がどんな行動を起こし、どう滅びていったのかこれまでの歴史を知ることができる。過去の歴史を知る、ということは今後の人間の行動を予測する材料を持つことに繋がるし、人間と動物の共通点や相違点を知ることで、人間が本能的に起こすであろう行動や思考回路を学ぶことができるんじゃないかと。

おすすめしたい本はまだ沢山ありますが、今回は筆者が先月読んだ本を中心に「考える力」を鍛える本をご紹介しました。


分からないことがあったらすぐに検索して、簡単に専門家レベルのコードや知識を入手することができるようにはなったけど、どうも「深く考える力」が無くなっているような気

論理的になるおすすめ本11選


## TL;DR

よく使う WordPress の if（条件分岐 / Conditional Tag）。使用頻度が高いものを書いてます。

### 基本

条件成立時、上の条件でない時、条件が成立しない時の条件が複数あるパターン。条件を増やすときは elseif を増やし、条件が一つだけのときは、elseif と else を省略する。

```php
<?php if() : ?>
// 条件成立時
<?php elseif () :?>
// 上の条件でない時
<?php else : ?>
// どの条件も成立しない時
<?php endif; ?>
```

### メインページ

```php
<?php if ( is_home() || is_front_page() ) : ?>
// ホームの時。管理画面でホーム表示を固定ページにしたときも適用される
<?php else : ?>
// ホームでない時
<?php endif; ?>
```

### ブログとカスタムポストの投稿ページを分岐させる

サイドバーで、ブログやカスタムポスト（ニュースなど）の表示を分岐させたいとき。

```php
<?php if(is_singular( 'post' )) : ?>
// single.php 表示
<?php elseif (is_singular( 'news' )) :?>
// single-news.php 表示
<?php else : ?>
<?php endif; ?>
```

### 個別投稿（シングル）ページ

```php
<?php if( is_single()) : ?>
<?php else : ?>
<?php endif; ?>
```

### 固定ページ

以下の例はコンタクト（contact）とアクセス（access）のスラッグ名で固定ページを分岐。

```php
<?php if(is_page('contact')) : ?>
  contactページの時、出力
<?php elseif (is_page('access')) :?>
  accessページの時、出力
<?php else : ?>
  その他
<?php endif; ?>
```

### 固定ページの子ページか判別

```php
if ( is_page() && $post->post_parent > 0 ) {
    echo "これは子ページです";
}
```

### 2 ページ目以降

is_page()は固定ページか判定、is_paged()は 2 ページ目以降か判定。

```php
<?php if( is_paged()) : ?>
<?php else : ?>
<?php endif; ?>
```

### ページテンプレート

template というディレクトリに作成したカスタムテンプレート contact.php を判別。ディレクトリを含めて書く。ページテンプレート内部はページ上部に「Template Name: contact」と記載されてある。

```php
<?php if( is_page_template(‘template/contact.php')) : ?>
<?php else : ?>
<?php endif; ?>
```

### モバイル

```php
<?php if ( wp_is_mobile() ) : ?>
// mobile
<?php else: ?>
// pc
<?php endif; ?>
```

### IE 判別

グローバル変数名（global ...）で呼び出した後に分岐させます。

```php
<?php
global $is_IE;
if ( $is_IE ) {
// IE
}
?>
```

### Chrome 判別

```php
<?php
global $is_chrome;
if ( $is_chrome ) {
// Chrome
}
?>
```

### Safari 判別

```php
<?php
global $is_safari;
if ( $is_safari ) {
// Safari
}
?>
```

### iPhone の Safari 判別

```php
<?php
global $is_iphone;
if ( $is_iphone ) {
// iphone safari
}
?>
```

### カテゴリページ

```php
<?php if( is_category()) : ?>
<?php else : ?>
<?php endif; ?>
```

### タグページ

```php
<?php if( is_tag()) : ?>
<?php else : ?>
<?php endif; ?>
```

### 作成者「taro」のページ

```php
<?php if( is_author(’taro')) : ?>
<?php else : ?>
<?php endif; ?>
```

### 検索結果

```php
<?php if( is_search()) : ?>
<?php else : ?>
<?php endif; ?>
```

### Not Found

```php
<?php if( is_404()) : ?>
<?php else : ?>
<?php endif; ?>
```

### functions.php での条件分岐

```php
add_action( 'loop_start', 'add_to_single_posts' );
function add_to_single_posts() {
if ( is_single('post') ) {
echo'xxxx';
    }
}
```

<a href="http://wpdocs.osdn.jp/%E6%9D%A1%E4%BB%B6%E5%88%86%E5%B2%90%E3%82%BF%E3%82%B0">条件分岐タグ - WordPress Codex 日本語版</a>

### よく使う論理演算子

<h4>複数（条件1 or 条件2）</h4>

```php
<?php if ( 条件1 || 条件2 ) : ?>
<?php endif; ?>
```

<h4>複数（条件1 and 条件2）</h4>

```php
<?php if ( 条件1 && 条件2 ) : ?>
<?php endif; ?>
```

<h4>複数（条件1 等しい 条件2）</h4>

```php
<?php if ( 条件1 == 条件2 ) : ?>
<?php endif; ?>
```

<h4>複数（条件1 等しくない 条件2）</h4>

```php
<?php if ( 条件1 !== 条件2 ) : ?>
<?php endif; ?>
```

<h4>複数（条件1ではない）</h4>

```php
<?php if ( !条件1 ) : ?>
<?php endif; ?>
```

以上、WordPress の条件分岐でした。


よく使うWordPressのif（条件分岐/ConditionalTag）。使用頻度が高いものを書いてます。基本条件成立時、上の条件でな

よく使うWordPressのif文（条件分岐）まとめ


## TL;DR

パンくずリストとは、サイトのどの階層にいるのか表示したもので、主にファーストビュー内に表示します。簡単に階層の移動ができるように現在位置以外はリンクで表示されます。今回は WordPress でパンくずリストを出す方法をご紹介します。 WordPress4.4 以降から非推奨になった wp_title を辞めて、「wp_get_document_title」関数を使ってパンくずリストにページタイトルのリンクを表示します。

### functions.php

```php
// WordPress4.4以降のtitleの記述方法
// <title>タグを自動出力
add_theme_support( 'title-tag' );
// <title>タグのセパレーターを変更
add_filter( 'document_title_separator', 'my_document_title_separator' );
function my_document_title_separator( $sep ) {
  $sep = '｜';
  return $sep;
}
// titleのDescription削除
add_filter( 'document_title_parts', 'remove_title_description', 10, 1 );
function remove_title_description ( $title ) {
  if ( is_home() || is_front_page() ) {
    unset( $title['tagline'] );
  }
  return $title;
}
// head 以外はタイトルのみを出力
function nohead_document_title($title){
  if(!doing_action('wp_head')){
    //doing_actionで、wp_headから呼ばれていない場合を判別
    unset( $title['site'] ); //サイトタイトルを削除
  }
  return $title;
}
add_filter('document_title_parts','nohead_document_title');
```

head 内はサイトタイトルとセパレーターを表示して、head 以外はサイトタイトルを削除します。これでパンくずリストの部分にはページタイトルのみ表示されるようになります。

#### インクルード

```php
// パンくずリスト出力
<section class="breadcrumb">
  <?php if(is_home()) : ?>
  <?php elseif (is_page()) :?>
    <a href="<?php echo esc_url( home_url() ); ?>">HOME</a> &gt; <?php echo wp_get_document_title(); ?>
  <?php elseif (is_category()) :?>
    <a href="<?php echo esc_url( home_url() ); ?>">HOME</a> &gt; 「<?php single_cat_title(); ?>」カテゴリー
  <?php elseif (is_month()) :?>
    <a href="<?php echo esc_url( home_url() ); ?>">HOME</a> &gt; 「<?php the_time('Y年m月'); ?>」月別アーカイブ
  <?php elseif (is_singular( 'news' )) :?>
    <a href="<?php echo esc_url( home_url() ); ?>">HOME</a> &gt; <a href="<?php echo esc_url( home_url( '/news' ) ); ?>">新着ニュース</a> &gt; <?php echo wp_get_document_title(); ?>
  <?php elseif (is_single()) :?>
    <a href="<?php echo esc_url( home_url() ); ?>">HOME</a> &gt; <?php $c = get_the_category(); echo '<a href="' . get_category_link( $c[0]->term_id ) . '">' . $c[0]->name . '</a>'; ?> &gt; <?php echo wp_get_document_title(); ?>
    <?php elseif (is_search()) :?>
      <a href="<?php echo esc_url( home_url() ); ?>">HOME</a> &gt; <?php echo wp_get_document_title(); ?>
  <?php else : ?>
  <?php endif; ?>
</section>
```

あとは、パンくずリストを表示させたいページにインクルードさせれば OK です。


パンくずリストとは、サイトのどの階層にいるのか表示したもので、主にファーストビュー内に表示します。簡単に階層の移動ができるように現在位置以外はリンクで表示され

WordPressでパンくずリストを出す方法


## TL;DR

WordPress テーマを作る時に使用頻度の高いテンプレートタグをまとめておきます。

## テンプレートタグとは

CMS では、html 等の骨組みにデータを流し込んで出力します。

WordPress のテンプレートタグとは、タイトルや画像・サイト URL の絶対パスなどを読み込み出力させるためのものです。テンプレートタグは自動で絶対パスやサイトの設定等を読み込むので、サイトを移行させた時も URL やパスなどを書き換える必要がなくなり便利です。WordPress テーマ作成をする時に必ず使う機能の一つなので是非覚えておきましょう。

### トップページ URL 出力

bloginfo('home や template_directory')などは廃止されています。URL は以下のタグを使います。管理画面>設定>サイトアドレスの部分を出力。

```php
<?php echo home_url(); ?>
// 例
<?php echo home_url('/foo/contact'); ?>
```

### ページタイトルだけを出力する新しい方法

※2018/01/28 追記。wp_title は WordPress4.4 以降から非推奨になったので、「wp_get_document_title」関数を使いましょう。

```php
// functions.phpに以下を記述してページタイトルだけを呼び出せるように設定
add_theme_support( 'title-tag' );
function nohead_document_title($title){
	if(!doing_action('wp_head')){
	//doing_actionで、wp_headから呼ばれていない場合を判別
	unset( $title['site'] ); //サイトタイトルを削除しページタイトルだけを残す
	}
return $title;
}
add_filter('document_title_parts','nohead_document_title');

// body内の出力したい場所にこれを書く
<?php echo wp_get_document_title(); ?>
```

### URL 無害化

URL として無効・危険な文字を防ぎたい場合は esc_url をつけても OK。

```php
<?php echo esc_url( home_url() ); ?>
```

### body にクラス付与

body 要素に class 属性をつけます。

```php
<body <?php body_class( $class ); ?>>
```

### img パス

画像のパスは使用頻度高し。

```php
<?php echo get_template_directory_uri(); ?>

// 例

### style.cssのパス
```

bloginfo('stylesheet_url')は非推奨。get_stylesheet_uri()は、スタイルシートの URI を返します。

```php
<?php echo get_stylesheet_uri(); ?>

// 例
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
```

### テンプレートパーツ組み込み

ページ内にあるバナーなど共通のコードを読み込む。

```php
<?php get_template_part();?>

// 例 include/banner.php ファイルを読み込む
<?php get_template_part('include/banner');?>
```

### グローバルナビゲーション

グローバルナビゲーションなどの中身は管理画面で変更できるように、カスタムメニューに登録します。以下はナビ名を gnav にして、コード内の div を消して ul をつけた例。後はフッターも同じ要領で追加しておく。

```php
<?php
  wp_nav_menu(
    array(
      'menu' => 'gnav',
      'container' => '',
      'items_wrap' => '<ul class="foo">%3$s</ul>'
    )
  );
?>
```

### アーカイブ リスト

日付のアーカイブを出力。以下はカスタムポスト「news」のアーカイブ数を 12 ヶ月で表示させた場合。

```php
<?php
$my_archives = array(
	'type'            => 'monthly',
	'limit'           => '12',//アーカイブ数を12ヶ月
	'format'          => 'html',
	'before'          => '',
	'after'           => '',
	'show_post_count' => false,//投稿件数
	'echo'            => 1,
	'order'           => 'DESC',
	'post_type'     => 'news'
);
wp_get_archives( $my_archives );
?>
```

### 条件分岐

html / php を入れ込める if 文。

```php
<?php if() : ?>
<?php elseif () :?>
<?php else : ?>
<?php endif; ?>

// 例
<?php if(is_page('profile')) : ?>
  profileページの時、出力
<?php elseif (is_page('lp')) :?>
  lpページの時、出力
<?php else : ?>
  その他
<?php endif; ?>
```

### ブラウザ判別

ブラウザ判別用の条件分岐。

```php
<?php
global $is_IE;
if ( $is_IE ) {
// IE
}
?>
```

グローバル変数一覧

```php
$is_iphone / iPhone Safari
$is_chrome / Chrome
$is_safari / Safari
$is_opera / Opera
$is_macIE / Mac IE
$is_winIE / Windows IE
$is_gecko / FireFox
$is_IE / IE
```

<a href="http://on-ze.com/3082" target="_blank" rel="noopener noreferrer">【WordPress】各ブラウザごとに条件分岐できるグローバル変数 - ONZE</a>

<a href="http://wpdocs.osdn.jp/%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E5%A4%89%E6%95%B0" target="_blank" rel="noopener noreferrer">グローバル変数 - WordPress Codex 日本語版</a>

### モバイル判別

モバイルの時だけ広告を表示したい時など。

```php
<?php if ( wp_is_mobile() ) : ?>
<?php else: ?>
<?php endif; ?>
```

functions.php に関しては、<a href="https://commte.net/6693" target="_blank" rel="noopener noreferrer">WordPress の functions.php に書いておくと捗ること</a>に書きました。合わせて読むと WordPress コーディングが捗ると思います。

以上、基本的ですが WordPress テーマ作成の時に知っておくと便利なテンプレートタグや条件分岐でした。


WordPressテーマ作成の時に覚えておくと便利なテンプレートタグ

## TL;DR

WordPress の functions.php に書いておくと捗ることをまとめておきます。

### 固定ページ判別。body に固定ページのスラッグ名を追加

body に固定ページのスラッグ名を追加。トップページは home のクラス名がつく。固定ページなどは guide about などのスラッグ名を取得しクラス名が付与される。

```php
function pagename_class($classes = ''){
  if (is_page()) {
    $page = get_post();//get_page()は廃止されたので使わない
    $classes[] = $page->post_name;//スラッグ名取得
  }
  return $classes;
}
add_filter('body_class', 'pagename_class');
```

呼び出し

```php
<body <?php body_class( $class ); ?>>
```

<a href="https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/body_class" target="_blank" rel="noopener noreferrer">テンプレートタグ/body class - WordPress Codex 日本語版</a>

<a href="http://terabenote.net/2079/" target="_blank" rel="noopener noreferrer">WordPress の body_class()にページスラッグの決定版 | terabenote.net</a>

### ブラウザ判別。body にブラウザ名付与

これをつけておくと、ブラウザごとにスタイル等を制御できるので便利。

```php
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
    global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

    if($is_lynx) $classes[] = 'lynx';
    elseif($is_gecko) $classes[] = 'gecko';
    elseif($is_opera) $classes[] = 'opera';
    elseif($is_NS4) $classes[] = 'ns4';
    elseif($is_safari) $classes[] = 'safari';
    elseif($is_chrome) $classes[] = 'chrome';
    elseif($is_IE) $classes[] = 'ie';
    else $classes[] = 'unknown';

    if($is_iphone) $classes[] = 'iphone';
    return $classes;
}
```

<a href="http://www.nathanrice.net/blog/browser-detection-and-the-body_class-function/" target="_blank" rel="noopener noreferrer">Browser Detection and the body_class() Function</a>

### アップロードした画像を特定のサイズにリサイズする

```php
add_theme_support('post-thumbnails');
add_image_size( 'trimming_600_400', 600, 400, true );
```

呼び出し

```php
<?php the_post_thumbnail('trimming_600_400'); ?>
```

### admin バー 非表示

```php
add_filter('show_admin_bar', '__return_false');
```

### ページタイトルを自動出力

WordPress4.1 でタイトルタグが追加されましたが、以下のタグを functions.php に記述すると、現在非推奨の wp_title 関数を使わずにタイトルを出力することができます。

```php
add_theme_support( 'title-tag' );
```

セパレーターなど細かなカスタマイズ方法は以下に詳しく書かれてます。

<a href="http://glatchdesign.com/blog/web/wordpress/1070" target="_blank" rel="noopener noreferrer">WordPress4.4 以降で title タグをカスタマイズする方法 | Glatch（グラッチ） – 夫婦で活動するフリーランス Web 制作ユニット</a>

### JavaScript をフッターに移動

JavaScript は基本的に head で読み込まず、できるだけ body の下部で読み込むようにしたいので、function.php に以下のように記載。そうすると後から JavaScript の処理をさせるので体感的にユーザーが遅く感じにくくなります。パラメーターを true にすることで wp_footer()で読み込まれます。true で body 終了タグの前、false で head 前。

```php
// trueでbody終了タグの前、falseでhead前
function register_jquery(){
wp_enqueue_script(
'common-js',
get_template_directory_uri() . '/js/common.js',
array(),
NULL,
true
);
wp_enqueue_script( 'common-js' );
}
add_action('wp_enqueue_scripts', 'register_jquery');
```

### ウィジェット登録

```php
register_sidebar(array(
  'name'         => __('widget1'),
  'id'           => 'widget1',
  'before_widget'=> '',
  'after_widget' => '',
  'before_title' => '',
  'after_title'  => '',
));
```

呼び出し

```php
<?php dynamic_sidebar('widget1' ); ?>
```

### プラグイン・WordPress 自動更新

```php
//プラグインの自動更新を有効化
add_filter( 'auto_update_plugin', '__return_true' );
//テーマの自動更新を有効化
add_filter( 'auto_update_theme', '__return_true' );
//メジャーアップグレードの自動更新を有効化
add_filter( 'allow_major_auto_core_updates', '__return_true' );
//マイナーアップグレードの自動更新を有効化
add_filter( 'allow_minor_auto_core_updates', '__return_true' );
```

### 不要な読み込みを減らして軽くする

WordPress バージョン情報を記載しておく理由などないし、Windows 用の WordPress ツールも使わないので削除しておきます。

```php
// WordPressのバージョン情報は削除したほうがいい
remove_action('wp_head', 'wp_generator');
// ブログ投稿ツール用
remove_action('wp_head', 'rsd_link');
// Windows Live Writerは使わないので削除
remove_action('wp_head', 'wlwmanifest_link');
// Embed WPのブログカード。他サイトのアイキャッチ画像や抜粋自動埋め込み
remove_action('wp_head', 'rest_output_link_wp_head');
remove_action('wp_head', 'wp_oembed_add_discovery_links');
remove_action('wp_head', 'wp_oembed_add_host_js');
// 管理画面絵文字削除
function disable_emoji()
{
    remove_action('wp_head', 'print_emoji_detection_script', 7);
    remove_action('admin_print_scripts', 'print_emoji_detection_script');
    remove_action('wp_print_styles', 'print_emoji_styles');
    remove_action('admin_print_styles', 'print_emoji_styles');
    remove_filter('the_content_feed', 'wp_staticize_emoji');
    remove_filter('comment_text_rss', 'wp_staticize_emoji');
    remove_filter('wp_mail', 'wp_staticize_emoji_for_email');
}
add_action('init', 'disable_emoji');
```

### 概要（抜粋）の文字数調整

```php
function my_excerpt_length($length) {
    return 80;
}
add_filter('excerpt_length', 'my_excerpt_length');
```

### 文末の[…]を削除し、...にする

```php
function my_excerpt_more($more) {
    return '...';
}
add_filter('excerpt_more', 'my_excerpt_more');
```

### コメント欄のメール削除し、コールバック関数を追加

```php
// コメント ウェブサイトの入力欄を消す
add_filter('comment_form_default_fields', 'mytheme_remove_url');
function mytheme_remove_url($arg) {
$arg['url'] = '';
return $arg;
}

// コメント フォーム内のURLオートリンクを停止する
remove_filter('comment_text', 'make_clickable');

// コメント カスタマイズ コールバック関数
function mytheme_comment($comment, $args, $depth) {
    if ( 'div' === $args['style'] ) {
        $tag       = 'div';
        $add_below = 'comment';
    } else {
        $tag       = 'li';
        $add_below = 'div-comment';
    }
    ?>
    <<?php echo $tag ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ) ?> id="comment-<?php comment_ID() ?>">
    <?php if ( 'div' != $args['style'] ) : ?>
        <div id="div-comment-<?php comment_ID() ?>" class="comment-body">
    <?php endif; ?>

        
        <div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ); ?>">
            <?php
            /* translators: 1: date, 2: time */
            printf( __('%1$s at %2$s'), get_comment_date(),  get_comment_time() ); ?></a><?php edit_comment_link( __( '(Edit)' ), '  ', '' );
            ?>
        </div>

        
        <div class="flex">
            <div class="comment-author vcard">
                <?php if ( $args['avatar_size'] != 0 ) echo get_avatar( $comment, $args['avatar_size'] ); ?>
            </div>
            <?php if ( $comment->comment_approved == '0' ) : ?>
                <em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></em>
                <br />
            <?php endif; ?>
            
            <div class="comment-content">
                <?php printf( __( '<cite class="fn">%s</cite>' ), get_comment_author_link() ); ?>
                <?php comment_text(); ?>
            </div>
        </div>

        
    <div class="reply">
        <?php comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
    </div>
    <?php if ( 'div' != $args['style'] ) : ?>
    </div>
    <?php endif; ?>
    <?php
    }
```

参考:<a href="https://debate.co.jp/901" target="_blank" rel="noopener noreferrer">WordPress コメント入力欄をカスタマイズしてウェブサイト(URL)やメールアドレスを簡単に消す方法 | debate</a>

以上、functions.php に書いておきたいことでした。

WordPressのfunctions.phpに書いておくと捗ること


## TL;DR

CSS だけで動く「ズームインとズームアウトをフェードしながら交互に繰り返す CSS スライダー」です。

### slider デモ

作成したデモはこちら。交互にズームインとズームアウトを繰り返し表示しています。CSS でみたい人は「VIEW COMPILED」を押してください。

2019/01/29 追記：IE でカクつく場合は、以下を li に追加するか、@keyframes に width 幅を px で指定してください。

```css
transform: rotate(0.0001deg);
```

<iframe height='292' scrolling='no' title='css　slider アニメーション' src='//codepen.io/commte/embed/9cea425c37d39a2327fe28ee0c0b1d58/?height=292&theme-id=26727&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/commte/pen/9cea425c37d39a2327fe28ee0c0b1d58/'>css　slider アニメーション</a> by commte (<a href='https://codepen.io/commte'>@commte</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

参考にさせていただいたのは、<a href="https://peonyqueen.wordpress.com/2016/03/04/css_slider/" target="blank">css だけで作るスライダー – PeonyQueen</a>で作成されているスライダー。
上記のスライダーがとてもよく出来ていて CSS のアニメーションで時間差をつけてスライドを切り替え、フェードインを繰り返すようになっています。CSS なので読み込みや動作も早く扱いやすいです。

こちらを参考に、html の img 記述をなくし、フェードインとフェードアウトを繰り返すようにカスタマイズさせていただきました。
5 枚の画像を切替えるバージョンです。html の記述はこれだけ。

### 実装

html

```html
<div class="slider_css">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
```

SCSS

```css
@mixin bp {
  @media only screen and (max-width: 768px) {
    @content;
  }
}
.slider_css {
  height: 550px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      background-size: cover;
      width: 100%;
      height: 550px;
      position: absolute;
      top: 0;
      left: 0;
      animation-iteration-count: infinite;
      animation-duration: 40s;
      @for $value from 1 through 5 {
        &:nth-child(#{$value}) {
          background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/381167/animal#{$value}.jpg');
          @if $value % 2 == 0 {
            //偶数
            animation-name: slider-zoomout;
          } @else {
            //奇数
            animation-name: slider-zoomin;
          }
          @if $value != 1 {
            //最初以外は透過
            opacity: 0;
          }
          animation-delay: #{($value * 8-11)}s; //-3からスタートして、8づつ加算する
        }
      }
      img {
        width: 130%;
      }
    }
  }

  @include bp {
    height: 400px;
    ul {
      li {
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }
}
// 5~8秒の間だけ透過解除
@keyframes slider-zoomin {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  12.5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  27.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
@keyframes slider-zoomout {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }
  12.5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  27.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
```

画像は CSS 背景に設定し、偶数と奇数の画像によって、ズームインとズームアウトのアニメーションを割り当てます。

ズームインだけ適用したい場合は、animation-name の箇所を、どちらも slider-zoomin にしてください。ズームアウトの場合は slider-zoomout ですね。

1 枚 8 秒(5 枚の画像 ×8 秒)で計算するので、アニメーション周期（animation-duration）は 40 秒で設定します。

1 枚目以外は透過させ、表示から開始させるので-3 秒からスタートし 8 秒づつ加算してアニメーション開始時間をずらします（animation-delay）。

| ◯ 枚目   | 1   | 2   | 3   | 4   | 5   | 6   |
| -------- | --- | --- | --- | --- | --- | --- |
| 開始時間 | -3  | 5   | 13  | 21  | 29  | 37  |

※1 枚目は-3 秒から開始し、2 枚目は 8 秒後の 5 秒から開始するという意味。

アニメーションは 40 秒間のうち 5~8 秒の間だけ透過解除したいので 12.5%（5×100/40=12.5）と 20%（8×100/40=20）に opacity:1 を設定。秒数を duration で割ります。

分かりにくいので表を作りました。以下の表だと、5 枚の時は 12.5~20%、4 枚の時は 15.63~25%に opacity:1 を指定すればよいということになります。

1 枚 8 秒で設定した時の計算表

| 枚数 | duration | 5 秒   | 8 秒   |
| ---- | -------- | ------ | ------ |
| 3    | 24s      | 20.83% | 33.33% |
| 4    | 32s      | 15.63% | 25.00% |
| 5    | 40s      | 12.50% | 20.00% |
| 6    | 48s      | 10.42% | 16.67% |

※アニメーション周期や画像枚数を変更する場合は、このあたりを再計算する必要が出てきますが、仕組みが分かれば比較的使いやすいのではないでしょうか。以上、軽量・高速・簡単記述の CSS スライダーでした。


CSSだけでOK！レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー


## TL;DR

知っておくと WordPress 構築が早くなる、ちょっと便利な WP-CLI コマンドをメモしておきます。

### WP-CLI について

WP-CLI とは、ターミナル上で WordPress に関する色々なことを操作できるツール。

<ul>
<li>WordPressの更新やバージョンアップ・テーマ・プラグインをコマンドから管理</li>
<li>スターターテーマがあるのでオリジナルテーマ開発に便利</li>
<li>管理画面で行う設定等がコマンド一発</li>
<li>固定・投稿ページ・コメント作成</li>
<li>インポート、エクスポート</li>
<li>などなど色々なことが短いコマンドで可能。</li>
</ul>

<a href="http://wp-cli.org/restful/" target="_blank" rel="noopener noreferrer">A more RESTful WP-CLI | WP-CLI</a>

### ローカルに wp-cli をインストール

ローカルの場合

```bash
curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
```

確認と権限付与とパスを通す。

```bash
php wp-cli.phar --info
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp
```

### レンタルサーバに wp-cli をインストール

レンタルサーバに wp-cli をインストールする場合は、ssh コマンドで接続後、web ディレクトリに移動し以下のサイトに記述してあるシェルスクリプトをダウンロードさせていただき設定。以下はさくらレンタルサーバに WP-CLI をインストールする手順とスクリプト。

シェルスクリプト:<a href="https://www.tecking.org/4169" target="_blank" rel="noopener noreferrer">レンタルサーバに『WP-CLI』をサクっと入れるシェルスクリプト作ってみたよ – 鉄王</a>

フロー:<a href="http://studiodansyaku.com/web/4300" target="_blank" rel="noopener noreferrer">さくらのレンタルサーバーに wp-cli を使って WordPress をインストール – StudioDansyaku</a>

```bash

# スクリプト
wget --no-check-certificate https://raw.githubusercontent.com/tecking/wp-cli.setup.sh/master/wp-cli.setup.sh

# 権限付与、スクリプト実行、設定有効化
chmod +x wp-cli.setup.sh
./wp-cli.setup.sh
source ~/.cshrc
```

任意のディレクトリを作成し、WordPress 本体をダウンロードします。コマンドからデータベース設定・初期設定を行う場合は上記サイトをご覧ください。

```bash
# さくらレンタルサーバにWordPressをインストールする場合
wp core download --path=/home/ユーザー名/www/ディレクトリ名 --locale=ja

# /var/www/html(ドキュメントルート)にインストールする場合
wp core download --path=/var/www/html --locale=ja

# wp-config.php作成
wp core config --dbname=DB名 --dbuser=ユーザー名 --dbpass=パスワード オプション

# WordPressインストール
$ wp core install --url=サイトURL --title=サイト名 --admin_user=ユーザー名 --admin_password=パスワード --admin_email=メールアドレス
```

<a href="http://wp-cli.org/commands/core/" target="_blank" rel="noopener noreferrer">wp core | WP-CLI</a>

### よく使う wp-cli コマンド

空の固定ページを 500 個作成する

```bash
wp post generate --count=500 --post_type=page
```

WP-CLI バージョン確認、アップデート

```bash
wp cli version
wp cli check-update
wp cli update
```

プラグイン bogo を探す

```bash
wp plugin search bogo
```

結果。

```bash
% wp plugin search bogo
Success: Showing 10 of 14 plugins.
+-------------------------------------+-------------------------------------+--------+
| name | slug | rating |
+-------------------------------------+-------------------------------------+--------+
| Contact Form 7 | contact-form-7 | 90 |
| Bogo | bogo | 94 |
| Pricing Deals for WooCommerce | pricing-deals-for-woocommerce | 88 |
| WooCommerce Multiple Free Gift | woocommerce-multiple-free-gift | 88 |
| Wholesale Pricing for WooCommerce | wholesale-pricing-for-woocommerce | 100 |
| WC Role Based Price | woocommerce-role-based-price | 90 |
| PW WooCommerce BOGO | pw-woocommerce-bogo-free | 0 |
| WooCommerce Single Product Checkout | woocommerce-single-product-checkout | 100 |
| BogoXLib | bogoxlib | 0 |
| Bogo translate ACF | bogo-translate-acf | 100 |
+-------------------------------------+-------------------------------------+--------+
```

プラグイン contactform7 をインストール。区切りスペースは空けずハイフンをつけて指定。

```bash
# インストール
wp plugin install contact-form-7

# 有効化
wp plugin activate contact-form-7

# 無効化
wp plugin deactivate contact-form-7
```

プラグインのバージョンを確認

```bash
wp plugin status
wp plugin list
```

WordPress 日本語パッケージアップデート ※推奨

```bash
wp core download --locale=ja --force
```

<a href="http://qiita.com/miya0001/items/96a684e2f819f9d8b4a4" target="_blank" rel="noopener noreferrer">WP-CLI で WordPress を日本語パッケージと同じ構成にする - Qiita</a>

wp-config.php 作成

```bash
wp core download
wp core config --dbname=DB名 --dbuser=ユーザー名
wp core install
```

<a href="http://wp-cli.org/commands/core/config/" target="_blank" rel="noopener noreferrer">wp core config</a>

WordPress コアアップデート

```bash
wp core update
wp core version
```

WordPress マイナーアップデート

```bash
wp core update --minor
```

テーマ スターターキット

```bash
wp scaffold _s sample-theme
```

プラグイン スターターキット

```bash
wp scaffold plugin sample-plugin
```

参考:<a href="http://wp-cli.org/" target="_blank" rel="noopener noreferrer">Command line interface for WordPress | WP-CLI</a>


WP-CLIコマンドの使い方


## TL;DR

写真を長方形にカットした真っ直ぐのファーストビューではなく、少し弧を描くような見せ方をしたい時に。今回は Photoshop を使ってアーチや半円などのカーブを描く方法。

こういった感じのファーストビューのデザインカンプを作りたい時に使えるんじゃないかと。

[養命酒 駒ヶ根工場・健康の森｜養命酒製造株式会社](http://www.yomeishu.co.jp/komagane/)

[福岡県飯塚市の皮膚科医院 | 医療法人 ふくはだ皮ふ科クリニック](http://fukuhada.com/)

ワープを使います。ワープとは画像の形・パス・シェイプなどを変形させる機能です。

### アーチ

長方形を作成した後で、上のメニューから、編集＞パスを変形＞ワープから

単純にレイヤーするだけならアーチを選択後、カーブをマイナスに調整すると下向きのアーチ。同じ要領でテキストや写真も曲げることができます。

### 下弦

大きな半円を描く場合はアーチではなく下弦を使います。編集>変形>ワープ>下弦を選択してカーブを調整。

完成。

横向きにしたい場合、編集>変形>ワープ>円弧 でカーブを設定した後に、円弧横のアイコンをクリックすると横向きの扇状の形を作れます。

### テキストに傾きをつける

テキスト左右の遠近感を与えたい場合はカーブさせると違和感があるので、カーブをゼロ、水平の歪みを-60%くらいに設定。

### 複数のオブジェクトを曲げる場合はレイヤー統合が必要

複数の長方形を連動させてカーブさせたい場合は、複数のオブジェクトを選択後「Ctrl+E」を押してレイヤー統合させた後にワープを適用させると上手くいきます。

後は Alt キーを押しながらマスク等をかければ OK。

以上、Photoshop を使って 10 秒でアーチや半円を描く方法でした。


写真を長方形にカットした真っ直ぐのファーストビューではなく、少し弧を描くような見せ方をしたい時に。今回はPhotoshopを使ってアーチや半円などのカーブを描く

2019-1-21

論理的Webデザインの法則

2018-12-25

WordPressプラグイン「MW WP Form」の使い方と住所自動入力（郵便番号で動かない場合）

2018-11-19

論理的になるおすすめ本11選

2018-3-19

よく使うWordPressのif文（条件分岐）まとめ

2018-2-19

WordPressでパンくずリストを出す方法

2018-1-22

WordPressテーマ作成の時に覚えておくと便利なテンプレートタグ

2017-12-11

WordPressのfunctions.phpに書いておくと捗ること

2017-8-28

CSSだけでOK！レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー

2017-7-18

WP-CLIコマンドの使い方

2017-6-19

Photoshopを使って10秒でアーチや半円を描く方法