WordPressで投稿が存在する年の一覧を取得する | Yoshinoki's Blog
はじめに WordPressを使っていて、「投稿が存在する年のデータのみを一覧で取得したい」という場面は意外と多いと思います。 （アーカイブページで年ごとに投稿を表示したい、年のデータを使った絞り込みUIを作成したい、など） しかし、WordPressには投稿年の一覧データのみ取得するための関数が用意されていません。 wp_get_archives()を使えばアーカイブリンクを取得できますが、この関数はHTMLしか返さないため、年の一覧を取得して何かしらの処理を行う場合は適していません。 ここでは、投稿が存在する年の一覧を取得する方法を2つ紹介します。 方法1：WP_Queryを使う WP_Queryを使って投稿を取得。愚直にループで年の一覧を取得します。 $args = [ 'post_type' => 'post', 'orderby' => 'date', 'posts_per_pa
WordPress: アイキャッチ画像URLの取得は get_the_post_thumbnail_url | WWWクリエイターズ
WordPressで、投稿のアイキャッチ画像のURL（文字列）を一発で取得する関数「get_the_post_thumbnail_url」が、Wordpress version4.4 でついにリリースされました！（２０１７年１２月） やった〜。逆になんでいままでなかったのでしょうか。 胸のつかえが取れた気分です。 アイキャッチ画像のURLを出力する関数 まずは関数です。ズバリ：the_post_thumbnail_url() // アイキャッチ画像のURL文字列を出力する the_post_thumbnail_url( 'medium' ); サイズは、’thumbnail’, ‘medium’, ‘large’, ‘full’, の中から好きにしてください。 引数で投稿IDを渡せないのは、不便ですが、the_xxxxの、theで始まる関数は、メインループ内での利用を意図されているというこ
【WordPress】テーマカスタマイザーを作成する｜notes by SHARESL
テーマカスタマイザーとは WordPressの管理画面でプレビューしながらコンテンツを編集・更新・公開できる機能です。 テキストなどを入力エリアに打ち込むとリアルタイムでプレビューが更新されるので直感的でわかりやすく、初心者でも簡単に修正・更新ができます。 具体的にはWordPressの管理画面に入って「外観 → カスタマイズ」で表示される画面のことです。 何も設定していないとうまく使えませんが、対応しているテーマの場合はここからコンテンツを変更できます。 WordPressの受託案件で何度か使うことがあり、自作することが多くなったので使った方法やコードを一度まとめてメモとして残しておきたいと思います。 公式では「テーマカスタマイズAPI」としてcodexに情報が掲載されています。 テーマカスタマイズAPI https://wpdocs.osdn.jp/%E3%83%86%E3%83%BC
カスタマイザーのカスタマイズ方法！自由度の高いテーマ作りができるようになります | HPcode（えいちぴーこーど）
カスタマイザーに項目を追加する方法 早速カスタマイザーに項目を追加していきましょう。完全にオリジナルな自分の項目を追加する想定で作っていきます。 公式はこちら → テーマカスタマイズ API – WordPress Codex 日本語版 まずはfunctions.phpに以下のようなコードを書いてあげてください。 （全部を丸々コピーでOKです） function my_customize( $wp_customize ) { $wp_customize->add_panel( 'my_panel', array( 'title' => 'パネル名', 'priority' => 1, ) ); $wp_customize->add_section( 'my_section', array( 'title' => 'セクション名', 'panel' => 'my_panel', 'prior
Axiosとは、AxiosでGETリクエストを実装するには？
Axiosとは、AxiosでGETリクエストを実装するには？ Axiosは、JavaScriptのHTTPクライアントライブラリとして、APIとの通信を行う時に非常に通用されるツールになります。それでは、AxiosでGETリクエストを送信するには、どうしたらいいですか？本文では、Axiosを詳しく紹介した上、それを使ってGETリクエストを実装する方法を皆さんに紹介します。 Axiosは、JavaScriptのHTTPクライアントライブラリとして、APIとの通信を行う時に非常に通用されるツールになります。それでは、AxiosでGETリクエストを送信するには、どうしたらいいですか？本文では、Axiosを詳しく紹介した上、それを使ってGETリクエストを実装する方法を皆さんに紹介します。また、Axiosより直感的でAPIリクエストを送信したり、レスポンスを取得したりできる方法も一緒に紹介していきた
ワードプレスでユーザーのログイン後にログイン前のページにリダイレクトする方法 – ワードプレスの移行・修正・カスタマイズ・復旧のご依頼はWordpress Doctorへ | Blog
この記事のショートリンクを取得 <a href='https://wp-doctor.jp/blog/?p=5886' target='_blank'>ワードプレスでユーザーのログイン後にログイン前のページにリダイレクトする方法</a> ワードプレスでユーザーがログイン成功した直後に任意の処理を実行する ワードプレスのユーザーログイン後のアクションは、login_redirectになります function afterlogin_function($redirect_to) { //ユーザーログイン直後の処理を記載します return $redirect_to; } add_action('login_redirect', 'afterlogin_function', 10, 1); ワードプレスでサブスクライバー(購読者)のみログイン後にログイン前にいたページにリダイレクトする 上記の処
WP REST APIでキーワード検索をしたら非同期で検索結果を表示
// ボタンクリックでイベント開始 document.getElementById("search-button").addEventListener("click", async () => { const searchInput = document.getElementById("search-input"); const searchResults = document.getElementById("search-results"); // 文字列の両端の空白を削除 const keyword = searchInput.value.trim(); // キーワードなしの場合無反応 if (keyword.length === 0) { return; } const targetSiteUrl = 'https://jobtips.net/'; // APIで取得したいURLを
WordPress taxonomy アーカイブの判別方法 - by Takumi Hirashima
WordPress で タクソノミーアーカイブページの判別方法を紹介します。 is_tax() 関数を使用する is_tax() 関数を使用する is_tax() 関数は、現在表示しているページが taxonomy アーカイブページかどうかを判定する関数です。 引数には、taxonomy のスラッグを指定します。 たとえば、taxonomy のスラッグが category のカテゴリーアーカイブページかどうかを判定する場合は、次のようになります。 if ( is_tax( 'category' ) ) { // カテゴリーアーカイブページ } まとめ WordPress で タクソノミーアーカイブページの判別方法を紹介しました。
WP REST APIのカスタムエンドポイントにカテゴリー名を追加した話
私にもありました。Wordpressでの一覧呼び出しはJs+RestAPIが正義だと思っていた時代が。。。 皆さんはWP REST APIを使用したことがありますか？ json形式で投稿を扱えるのですごく便利なのですが、「この情報が含まれていないからエンドポイントに追加したい」ということが割りと起こります。 特にカテゴリーはidしか含まれていないので、取得後、さらにカテゴリー名を取得しに行くという2度手間が発生します。 そこで今回はWP REST APIのエンドポイントにカテゴリー名やカテゴリーに付随する情報を追加してみましょう。 # この記事で解決すること WP REST APIのエンドポイント（post_type）にカテゴリー名を挿入することができる WP REST APIのエンドポイント（post_type）にカテゴリーに付随する情報を挿入することができる 前提 今回はカテゴリーのn
Advanced Custom Fields Proを用いたGutenbergのブロック開発 - Qiita
Gutenbergが嫌われている件について WordPress5.0にてGutenbergが搭載されてから早4年が経ちました。 今ではGutenbergをフル活用した「フルサイトエディター (FSE)」なるものが実装されつつあり、もはやWordPressを使用する人にとって、Gutenbergの理解は必須です。 しかし、、、世の中はGutenbergが嫌いな人が多い印象を抱きます Gutenberg内の機能開発が活発であり、運用の工数がかかる クラス名が勝手に割り振られてしまい、CSSでの制御が難しい アップデートによりブロックの見た目が崩れることがある Classic Editorよりも、投稿画面のカスタマイズがしにくい カスタムフィールドを設置しても、場所が見にくい（ページ下部とサイドバーにしか出せない）ので編集しにくい などが主に嫌われる理由だと思います。 ※余談ですが、フルサイトエ
Elementorでできる、すごいWebレイアウト用コードスニペット、つくり方まとめ
Elementor（エレメンター）を使えば、プロのような美しいWordPressホームページを、ドラッグ＆ドロップの簡単操作で、スピーディーに作ることができ、初心者にもオススメのツールです。 あらかじめ作成されたテンプレートを利用すれば、だれでも思い通りのウェブページを、ワンクリックで作成でき、時間の節約にもなります。 ここでは、Elementorで実現できる魅力的なWebレイアウト20選を、コピペできるサンプルコードと一緒にご紹介します。 ところで、Elementorってなに？ Elementorは、コーディングの専門知識がなくても、ドラッグ＆ドロップするだけで、ホームページを作成できる、いま話題の「ノーコードツール」のひとつ。 WordPress全体の18.5%が、Elementorをインストールしており、これまでに２億回以上ダウンロードされている人気プラグインです。 直感的にサイトの
WordPressをヘッドレスCMSにしてNext.jsでブログを作成する方法とエラー対処法
2022年12月24日 JavaScript, React, Wordpress 最近はReactをベースにしたフレームワーク、Next.jsをいじっております。今回はWordPressに登録した投稿をNext.jsで表示させてみようと思います！ ↑私が10年以上利用している会計ソフト！ ヘッドレスCMSとは？ ヘッドレスCMSはコンテンツの管理のみをするCMS（＝Content Management System）のこと。例えばWordPressではコンテンツの作成から表示までを行えますが、ヘッドレスCMSではコンテンツの表示は別の方法で行います。ここではNext.jsを使ってみます。 ヘッドレスCMSを使うメリット 表示部分を別途用意することになんのメリットがあるのでしょうか？ざっくりと以下の3点が挙げられるかなと思います： 表示速度の改善 セキュリティの向上 管理しやすい 通常のWo
WordPress でSFTP接続する方法 - by Takumi Hirashima
WordPress でSFTP接続する方法を紹介します。 SFTPの関係で管理画面からプラグインのアップデートが行えない時に便利な方法です。 プラグイン SSH SFTP Updater Support をダウンロード プラグインをサーバーにアップロード プラグインを有効化 wp-config.php にコードを追加 接続情報を更新 プラグイン SSH SFTP Updater Support をダウンロード SFTPの関係で管理画面からプラグインのアップデートが行えない場合、プラグイン SSH SFTP Updater Support を利用することで、管理画面ないから SFTP 接続を行うことができます。 まずは SSH SFTP Updater Support をサイトからダウンロードします。 プラグインをサーバーにアップロード ダウンロードしたプラグインのファイルをFTPクライアン
WordPress5.4から変更されたfavicon.icoへのリクエストについて | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、バックエンドエンジニアの小林です。 今日はWordPress5.4から変更されたfavicon.icoへのリクエストについてご紹介しようと思います。 この記事を執筆中のWordPressの最新バージョンは5.9なので、なんで今更と思われてしまうかもしれませんが、気づかなかった機能だったのでこうして記事にしてしまいました。 WordPress5.4より前 WordPressのテーマ開発をされている方は、これまでfaviconをどのように設定していましたか？ アイコンファイルはテーマファイル内に配置し、テーマファイル内のヘッダー部分で、そのファイルを指定しているケースなどが多いように思います。 この場合、通常アクセスされるWordPress内のページは問題ありませんが、アップロードされたメディアファイルなどへアクセスした場合はどうだったでしょうか？ ブラウザなどの状況によっては、f
WordPress カスタム投稿タイプで日付別アーカイブページが表示されない時の対処方法 - by Takumi Hirashima
WordPress カスタム投稿タイプで年別や月別の日付別アーカイブページが表示されない時の対処方法を紹介します。 例えば、カスタム投稿タイプのパーマリンク設定を「/%post_id%」にしている時に便利な方法です。 表示するテンプレートが不明な場合にも試していただけると幸いです。 カスタム投稿タイプで日付別アーカイブが表示されない原因 カスタム投稿タイプで年別アーカイブを表示する方法 カスタム投稿タイプで月別アーカイブを表示する方法 カスタム投稿タイプで年別アーカイブが表示されない原因 カスタム投稿タイプのパーマリンク設定を「/%post_id%」にしていると、日付アーカイブページが表示されない場合があります。 原因は、「/%post_id%」指定で記事を作ると、記事URLが「例）example.com/news/1980」となり、日付別アーカイブと投稿ページとの判別できなくなるため、ア
【WordPress】カスタム投稿タイプのパーマリンクをカスタムするとアーカイブと個別記事が404になる（function.php） | 株式会社エンタースクウェア | Web制作
原因：リライトさせる正規表現と基本URLが間違っていた rewrite_rules_arrayを設定する時に、正規表現とリダイレクトさせる基本URL（パラメーター付きのURL）が間違っていた事が原因でした。 以下が404を解決できたソースです。 add_filter( 'post_type_link', 'my_type_link', 1, 2 ); function my_type_link( $link, $post ){ if ( 'my_post' === $post->post_type ) { // カスタム投稿名/ターム/にする $term = wp_get_post_terms( $post->ID, 'my_category' ); if(!empty($term)){ //タームが指定されている場合 return home_url( '/my_post/' .$term
WordPressで日付の範囲指定をして記事を表示する方法 | それからデザイン スタッフブログ
WordPressでブログ投稿を一覧ページに表示する際、○月○日から○月○日までといった具合に、日付の範囲指定して表示させたいことなどありませんか？ 例えば、○月○日から○月○日までのイベントに関する記事を表示させたいなどが考えられると思います。 そのような場合、「date_query」を上手に使うと、日付の範囲指定をして記事を表示することができるので、とても便利です。 今回は、「date_query」の使い方やパラメーターの種類について、幾通りかの日付の範囲指定を例に、少しご紹介をさせていただきたいと思います。 WP_Queryクラスで「date_query」を利用する 投稿日を指定する場合（例 2015/7/21 ） year、month、dayに取得したい日付をそれぞれセットします。 $args = array( 'date_query' => array( array( 'year
WordPress 固定ページにベーシック認証を設定する方法 - by Takumi Hirashima
WordPress で特定の固定ページにベーシック（BASIC）認証を設定する方法を紹介します。 例えば、会員向けの特典ページなどで、IDパスワードを知っている特定のユーザーに見せたいページを作る時に便利な方法です。 ここで紹介する方法は、固定ページにベーシック認証を設定することを前提に説明しています。 コードを二箇所に追加 function.php にコードを追加 header.php にコードを追加 コードを二箇所に追加 特定のページにベーシック認証を設定するには、コードを function.php と header.php の二箇所に追加するだけで実装が可能です。 function.php にコードを追加 まずは function.php に次のコードを追加します。 /*【ベーシック認証】特定ページにベーシック認証を設定する */ function basic_auth($auth_
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WooCommerce: Login Redirect by User Role @ My Account
How to change the default HTML output of a Gutenberg block in WordPress?