タグ

ブックマーク / hirashimatakumi.com (8)

  • WordPress アイキャッチ画像の表示方法 - by Takumi Hirashima

    WordPress アイキャッチ画像の表示方法と、頻繁に使うカスタマイズ方法を合わせて紹介します。 例えば、キービジュアルやOGP画像、投稿一覧のサムネイル画像など、投稿を象徴する画像を設定したい時に便利な方法です。 アイキャッチ画像とは? アイキャッチ画像を有効化する方法 カスタム投稿タイプでアイキャッチ画像を有効化する方法 アイキャッチ画像の表示方法 表示するアイキャッチ画像サイズを変更する方法 アイキャッチ画像に独自のクラスを付与する方法 条件分岐でアイキャッチ画像を表示する方法 ページナビでアイキャッチ画像を表示する方法 アイキャッチ画像のURLを取得する方法 画像のaltにページタイトルを指定する方法 アイキャッチ画像の横幅や高さを別々に取得する方法 管理画面で表示されるアイキャッチ画像のラベルを変更 アイキャッチ画像をOGP画像に指定する方法 アイキャッチ画像とは? WordP

    WordPress アイキャッチ画像の表示方法 - by Takumi Hirashima
    idr_zz
    idr_zz 2018/11/07
    アイキャッチサイズthumbnailが150pxって小さいね。 WordPress アイキャッチ画像の表示とカスタマイズ方法 - by Takumi Hirashima
  • WordPress 固定ページで抜粋を表示する方法 - by Takumi Hirashima

    WordPress の固定ページで抜粋を表示する方法を紹介します。 投稿と違い固定ページは最初から抜粋機能が使用できないため function.php にコードを追加して機能を有効化する必要があります。 抜粋の有効化 抜粋の表示 抜粋の最後の文字列を変更する 抜粋の有効化 固定ページで抜粋機能を有効化するためには、特定の機能を有効化できる関数 add_post_type_support() を使用します。 例えば、固定ページで抜粋を有効化する場合は次のコードを functions.php に追加します。 /*【出力カスタマイズ】固定ページで抜粋の機能を有効化 */ add_post_type_support( 'page', 'excerpt' ); コードを追加後、固定ページの編集画面に抜粋が表示されていれば問題ありません。 抜粋の表示 有効化した抜粋の表示には the_excerpt

    WordPress 固定ページで抜粋を表示する方法 - by Takumi Hirashima
    idr_zz
    idr_zz 2018/11/01
    固定ページのthe_excerpt()を有効にする方法。functionsに書く。 WordPress 固定ページで抜粋を表示する方法 - by Takumi Hirashima
  • WordPress foreach のループを特定の回数だけ回す方法 - by Takumi Hirashima

    WordPress で foreach のループを特定の回数だけ回す方法を紹介します。 合わせて、foreach のループを特定の回数で終了する方法も紹介します。 最初の値だけ取得したい場合 ループを2回だけ回したい場合 最初の値だけ取得したい場合 最初の値だけ取得したい場合は、最初の値を取得または表示した時点で break を実行してループを終了させます。 <?php $arr = array(1, 2, 3, 4); // サンプルの値 foreach ($arr as $value) { echo $value; break; } ?> ループを2回だけ回したい場合 ループを2回だけ回したい場合は、回した数をカウントして指定したカウントの時に break を実行してループを終了させます。 <?php $x=1; // カウントをリセット $num=3; // 指定した数で終了 $ar

    WordPress foreach のループを特定の回数だけ回す方法 - by Takumi Hirashima
    idr_zz
    idr_zz 2018/10/19
    Foreachから最初の一回だけで抜けるbreak! 任意の回数で抜ける方法も。 WordPress foreach のループを特定の回数だけ回す方法 - by Takumi Hirashima
  • WordPress メインループとサブループの表示方法 - by Takumi Hirashima

    WordPress で投稿を表示するためのメインループとサブループの表示方法を紹介します。 例えば、最新記事一覧やカテゴリー別記事一覧を表示したい時に便利な方法です。 ループは大きく分けて「メインループ」と「サブループ」の2つに分けられます。 この記事では使用頻度の高いサブループの表示方法をメインに紹介していきます。 メインループの表示方法 サブループの表示方法 投稿の表示件数を指定する方法 投稿をターム別に絞り込む方法 特定の投稿を除外する方法 現在表示している投稿を除外する方法 投稿を昇順・降順などで指定する方法 関連記事の表示、表示中の投稿と同じタームに分類されている投稿をランダムに表示する方法 投稿数を取得する方法 カスタムフィールドの値で投稿をソートする方法 投稿タイプを複数指定する方法 投稿一覧に年の見出しを付ける方法 投稿を順序順で表示する方法 非公開記事を除外する方法 固定

    WordPress メインループとサブループの表示方法 - by Takumi Hirashima
    idr_zz
    idr_zz 2018/10/18
    メインループとサブループ の中身は結構共通 WordPress メインループとサブループの表示方法を紹介 - by Takumi Hirashima
  • ACF 繰り返しフィールドの表示方法 - by Takumi Hirashima

    WordPress プラグイン ACF の機能の1つ、繰り返しフィールド(Repeater Field、以下リピーターフィールド)の表示方法を紹介します。 例えば、カスタムフィールドを繰り返し入力したいときに便利な機能です。 表示方法と合わせて、値を取得する際に間違いやすい点や、対処方法や便利な使い方を紹介します。 リピーターフィールドとは? リピーターフィールドの表示方法 基的な表示方法 入力が無い場合の処理 リピーターフィールドと有料機能のオプションページを使った場合の表示方法 注意点 foreach を使った基的なループの表示方法(PHP foreach loop) foreach で最初と最後を判断して処理する方法 配列の順番を逆にする方法 リピーターフィールドを入れ子にした場合の表示方法 表示結果をランダムにする方法 フィールド値をリセットする方法 配列の数を取得する方法 よ

    ACF 繰り返しフィールドの表示方法 - by Takumi Hirashima
    idr_zz
    idr_zz 2018/10/12
    ACFにリピート機能を追加するアドオン Advanced Custom Fields のアドオン Repeater Field(リピーターフィールド)の表示方法 - by Takumi Hirashima
  • CSS でドロップシャドウをつける方法 - by Takumi Hirashima

    CSS でドロップシャドウをつける方法を紹介します。 例えば、CSS で要素に影をつけたいときに便利な方法です。 類似機能のボックスシャドウと比べて、ドロップシャドウは擬似要素も対象になります。 ドロップシャドウを付ける方法 ブラウザの対応状況 box-shadow じゃだめなの? ドロップシャドウを付ける方法 CSS で特定の要素にドロップシャドウを付ける方法を紹介します。 ドロップシャドウをつけるには filter プロパティの関数 drop-shadow を使用します。 実際の見た目はこんな感じです。 ベースの HTML は次の通りです。 <div class="dropshadow">ドロップシャドウ</div> CSS はこちら。 .dropshadow { position: relative; width: 240px; margin: 0 auto; padding: 15

    CSS でドロップシャドウをつける方法 - by Takumi Hirashima
    idr_zz
    idr_zz 2018/06/29
    お、dropとboxで擬似要素の挙動が変わる! コピペで簡単 CSS でドロップシャドウをつける方法 - by Takumi Hirashima
  • jQuery クリックの連打対策をする方法 - by Takumi Hirashima

    jQuery でクリックの連打対策をする方法を紹介します。 クリックイベントで処理が終わる前に再度クリックしてしまうと、もう一度イベントが実行され意図した動きにならない場合があります。 対策方法 連打対策をしたい項目に .stop(true, false) を追加します。 $(function(){ $("#button").click(function(){ $(".block").stop(true, false).animate({width: "50%"}, 500) .animate({width: "100%"}, 500); }); }); まとめ jQuery でクリックの連打対策をする方法を紹介しました。

    jQuery クリックの連打対策をする方法 - by Takumi Hirashima
    idr_zz
    idr_zz 2018/02/02
    アニメの連打対策たまに忘れがち。これ入れるといい感じに対応される。 jQuery クリックの連打対策をする方法 by @t93hirashima
  • WordPress 文字の一括置換プラグイン Search Regex の使い方 - by Takumi Hirashima

    WordPress で投稿と固定ページの情報を、検索・置換することができるプラグイン Search Regex の使い方を紹介します。 カスタム投稿タイプはプラグインのカスタマイズで対応可能です。カスタマイズ方法は後半で紹介します。 では、順を追ってプラグインの使い方を説明します。 文字の一括置換ができるプラグイン Search Regex の使い方 Source 検索・置換の対象を指定 Limit to 置換する上限を指定 Order By 検索を行った時の並べ替 Search pattern 検索文字列 Replace pattern 置換文字列 Search 検索 Replace 置換 Replace & Save 置換後に保存を実行 Regex 正規表現で実行 カスタム投稿タイプを検索範囲に含める方法 文字の一括置換ができるプラグイン Search Regex の使い方 WordP

    WordPress 文字の一括置換プラグイン Search Regex の使い方 - by Takumi Hirashima
    idr_zz
    idr_zz 2017/12/26
    プラグインもあるようだが、さっきの隠しページとどっちがいんだべか。 WordPress 記事の内容を検索・置換ができるプラグインの紹介 by @t93hirashima
  • 1