WordPressでReactを使うWordPressのRestAPIの活用例Reactの実装についてReactのuseEffect, useStateの実例Reactでロード画面の表示 こんにちは。 この記事ではReactからRestAPIでWordPressの新着記事の投稿を取得し表示するプログラムに取り組んだ備忘をまとめます。 新着記事を読み込むタイミングはReactのすべてのレンダーが終わった後に発火する副作用フック useEffect をトリガーを使います。 WordPress×Reactの爆速サイト作成のきっかけになるかもしれません。

以前の記事では、jQueryとWP REST APIを使って記事一覧を表示するスニペットを紹介しましたが、今回はAPIでReactを使った記事一覧の方法について解説していきます。 関連記事 WP REST APIのJavaScriptで他のWordPressの記事をJSONで出力

まえがき 2020.6.11投稿 WordPressの管理画面で 記事を投稿したりコンテンツを編集する機能はクライアント向けに残しておきたい。 しかしフロントエンドはモダンjsフレームワークであるReactを利用しSPAとしたい。 これが本記事の目的です。 この記事でできるようになること ・WordPressのフロントエンドを、Reactで組めるようになる ・WP REST APIをReactで使えるようになる ・カスタムフィールドの内容をReactでどう取得して出力するかわかる ・Reactでタブコンテンツを実装できるようになる ・Reactでハンバーガーメニューを実装できる ・json形式のデータをmapで出力できる ハンバーガーメニューはReactでclass名をtoggleしています。 cssは適宜用意してください。 タブコンテンツも同様です。 ※参考ハンバーガーボタン ※参考タブ

ポートフォリオを引き続きアップデートしており 今はWordPressのREST APIを使用してブログ機能を追加しています。 TL;DR WordPressのREST APIだと最大でも100件までしか記事が取得できなかったから functions.phpに全記事を書き出すJSONを追加してみた。 WordPressのREST APIの取得について まずドキュメントへのリンクを。 WordPressの公開URL末尾に「/wp-json/wp/v2/」することで取得可能で ここにパラメーターなどを渡して、カテゴリー一覧などを取得します。 公式サイトのURLだとこんなイメージ https://wordpress.org/wp-json/wp/v2/ デフォルトで最大件数で取得する場合のパラメーターでよくあるのはこれみたいです（検索調べ） /wp-json/wp/v2/posts?per_pag

今回も引き続きWP REST APIに関する内容になっています。過去記事

WordPress 5.0から導入されたブロックエディター(Gutenberg)のカスタマイズ方法や、関連するオプション、新しく導入された設定について見ていきます。オフィシャルの テーマサポート の内容をベースに、独自の情報を追加しています。 更新履歴 2021/06/11 - ブロックフォントサイズの shortName が無くなったので削除。ブロックパターンの削除、カスタム単位、カスタム行間について追加。 2021/01/10 - グラデーション設定を追加。 2020/06/19 - 投稿タイプ別に使えるブロックを制限する方法を追加。 2020/05/24 - ブロックスタイルの削除について追加。 2020/04/22 - 後方互換性についての注意を追加。ダークモードの記載追加。 2020/02/20 - Gutenberg 7.5 でインラインの文字色編集が追加されたので記載。 20

実際にプラグインを開発してみてわかった、かゆいところに手が届く解説 WordPressでは、その人気にふさわしく多くのプラグインが用意されています。 それに合わせて、プラグインの作り方を解説するサイトも多く、Codexにも解説ページが用意されています。 情報が豊富なのは良いことなのですが、今回SNSのカウントをキャッシュするプラグイン「Step by Step Social Count Cache」を開発するに当たり、「これは先に解説して欲しかった…」「え、なんでこれ解説がないの？」と悶々とすることが多々ありました。 そこで、初めてプラグインを作成する方がハマりやすいポイントも含めて解説します。 WordPressプラグインの解説、全体の目次 本気で作りたい人向け、WordPressプラグインの作成方法（このページ） WordPressプラグインの仕組みとクラスを利用したより実践的な解説

お城めぐりGPSスタンプラリー「戦国攻城記」はWordPressで構築されており、各ユーザーのお城の攻略情報は投稿者アーカイブを活用しています。 そうなると、ユーザーページのURLは http://kojoki.jp/author/ユーザーログイン名/ となるわけですが、このURLを変更したかったので、その際の手順をメモしておきます。 WordPressのURLの処理 そもそも、WordPressが使われているページのURLは、WordPressのトップページのURLに様々なパラメーターをつけると表示されます。 http://kojoki.jp/?p=286 これだとサイトの構造がわかりにくいし、SEOにもよろしくないので、例えば http://kojoki.jp/about/ でアクセスされたら http://kojoki.jp/?p=286 を表示する みたいに処理してくれます。 今回

便利すぎて、正直びっくりした。 Local by Flywheel のウェブサイト WordCamp US へ参加した際にブースを出していたのを見かけていたのが “Local by Flywheel” というローカル環境を構築するためのツール（https://local.getflywheel.com/）。 MAMP (Pro) の UI が綺麗で速くて各サイトが分離されていて、機能がとても多い版というと分かりやすいでしょうか。また、WordPress の環境に特化しており、ワンクリックインストールやマルチサイト、SSL、Apache/Nginx の選択や切り替え、メールのデバッグツールや開発中のサイトの一時的な公開など、WordPressを使ってウェブサイトを作りましょう、となった場合に必要になりそうな機能を備えています。 で、無料です。 トップページに書かれているその機能は以下のように

せっかくWordPressで文章を書いているなら、うまく仕事につなげたいもの。ソーシャル拡散からマネタイズまで、お役立ち系プラグインの紹介です。ライターじゃなくても、WordPressサイトを運用しているならチェックしてみて。 ライター（本の著者かコピーライターかを問わず）の生活は誤解されがちです。周りの友人からは夢のような仕事を始めたと思われます。自宅を出てオフィスに出勤する必要はなく、やることなすことに文句をつけてくるうるさい上司もいません。さらに会社という制約もなく、毎日4時間の昼食休憩を取れると思われているのです。 確かにそういうことはあるものの、ライターの生活はノートPCのブルーライトを何時間も浴びることだという事実についてはみな忘れがちです。また、しっくりくる言葉やフレーズ、的確なトーンを必死に探さなければなりません。ライターにとって、生計を立てていくことは実態のない制御不可能

WordPressでサイトを作るときに、参考になるWordpressサイトはないものかと思ったことが一度はあるはずです。 WordPressでつくられたサイトからはデザイン・機能・運営方法まで参考になることが多いのではないでしょうか。そこで今回はWordpressでつくられたサイトを有名なところから50個ピックアップしてまとめました。後から読み返しやすいようにサイトのタイプ別に分類しています。 ※2016年3月末時点でWordpressでつくられたサイトであることに注意してください。 企業サイト・組織サイト 株式会社カカクコム 価格ドットコムなどを運営する株式会社カカクコムのコーポレートサイト。 http://corporate.kakaku.com/ クックパッド株式会社 クックパッド株式会社のコーポレートサイト。 https://info.cookpad.com/ 株式会社ベクター オ

WordPressの「これが困った！」 WordPressで困っていることはありませんか？ サーバー移転／エラー解消／カスタマイズなど、WordPressの「これが困った」を解決します。 WordPressの便利屋 ウェブサイトに画像や資料をダウンロードできる機能がほしい。そんな要望がわりとあります。 写真やイラストを目的に合わせてダウンロードできるストックフォトサービス。最近はオーディオやムービーもダウンロードできるところが増えてますね。 そこまでの規模じゃないとしても、ウェブデザインや作曲をしているクリエイター寄りの人で、自分のサイトでPSDファイルやmp3をダウンロード形式で配布してみたいという人はけっこういそうです。 コーポレートサイトでも、取り扱っている製品やサービスの資料をサイト訪問者が簡単にダウンロードできる仕組みがほしいという声をよく聞きます。卸売のようなBtoBサイトの場

WordPress は基本的にトップページでも下層ページ（投稿・固定ページ・アーカイブ）でも同じ CSS を読み込んでいます。 場合によっては、特定の CSS をそのページでのみ読み込みたいケースもあるんじゃないでしょうか。たとえば「CSS を使った見出しのデザインサンプル」といった記事を書くときや、オリジナルテーマを制作して納品するときですね。 すべて style.css やカスタマイザーの「追加 CSS」に書くと管理が面倒ですし、他の記事でまったく使わない CSS が大量にあると表示スピードにもわずかながら影響します。 そこで、そのページにだけ個別のスタイルを適用する方法をご紹介していきます。 個別の CSS を設定する方法 01. <head> 内で条件分岐する 投稿編集画面での CSS 編集を必要としないなら、特定のページに適用する CSS ファイルを FTP でアップロードしてお

今日はお散歩に出かけて、桜の花と梅の花を満喫してきました。 気温も結構暖かく、もう春着てますね～。 さて、最近知ったプラグインなんですが『SiteGuard WP Plugin』というもの。 WordPress › SiteGuard WP Plugin « WordPress Plugins きっかけは、ヘテムルでWordPressを自動インストールした時に、最初から入っていました。 Akismetは商用利用は有料なので使えず、かといって他にいい感じのセキュリティプラグインを見つけきれてなく、このプラグインが国産ということもあって、とりあえずお試しで使ってみました。 使ってみるともうAkismetなんか使わなくても、十分有り余るくらいのプラグイン。 いやぁ、これは使ってみるべきですよ。 目次 SiteGuard WP Pluginの機能 各種設定方法 管理ページアクセス制限 ログインペー

WordPress管理画面から、テストデーターをインポートするには、「ツール → インポート」メニューを選択します。 すると、以下のような「インポート」画面が表示されるので、「Wordpress」リンクをクリックします。 ここで、テストデーターのインポート用のプラグインがインストールされていない場合は、「WordPress Importer」というプラグインのインストールが促されます。 ここは、「今すぐインストール」ボタンを押すだけでOKです。（インストールされている場合は、この作業は不要） すると、インポート画面が表示されるので以下の手順でアップロードボタンを押します。 「wordpress-theme-test-date-ja.xml」をローカルから選択する 「ファイルをアップロードしてインポート」ボタンを押す すると、以下のようにユーザー名を変更する画面が現れます。ユーザー名を変更し

WordPressで複数の画像を横並びにしたいならWPCanvasプラグインが便利すぎた！2014.11.09 WordPressでブログ記事を書いていると、複数の画像を横並びにして表示させたいケースがあります。当ブログでは今までCSSで調整したり、テーブルを組んでからラインを消したり、相当の労力をかけて表示を試みていました。（これが本当面倒くさい・・） しかし、WP Canvas – Shortcodes プラグインを使うようになってからは、記事内に任意のカラムを簡単に指定することができます。 このような ⇒ 理論派 vs 感情派 の8つのブログ運用談義コンテンツも短時間で作れるようになりました。 ここでは、1分程度で2枚の画像を横並びにする工程を解説します。私のようにCSSやhtmlが苦手だったり、まったく分からない方にはとても便利ですね。 WP Canvasの設定方法① カラムを選択

WP One Metric WP One Metricっていうコンテンツの評価を可視化するWordPressプラグインを作りました。Github > WP One Metric Webコンテンツの成果を評価するたった1つの指標「One Metric」の記事に書いてある指標の計算ロジックをそのままWordPressプラグインにしてます。 縦軸が評価指標、横軸が各記事です。縦軸の50を基準に良し悪しの判断の指標とすればよいです。 使い方 使い方は「設定＞WP One Metric」からGAに関する情報を設定するだけです。 View IDはGoogle Analyticsの「アナリティクス設定 > ビュー設定」にあるビューIDに記載してある数字を入れてください。 そして。「ダッシュボード＞WP One Metric」からAnalyzeボタンを押すと解析が走ってグラフが表示されます。 解析は過去4

See related links to what you are looking for.

「Post Type Requirements Checklist」は、投稿画面に必須項目を簡単に設定できるプラグインです。 指定した項目で何が抜けているのかもわかりやすく、項目が全て埋まっていないと公開ボタンも表示されない仕組みなので、いつもアイキャッチ指定やカテゴリー指定を忘れて公開してしまうなんて人にピッタリだと思います。 紹介している内容やキャプチャなどは、WordPress Ver 4.1で使用した際のものになります。 インストール・有効化 管理画面のプラグインから「Post Type Requirements Checklist」を検索してインストール、もしくは「Post Type Requirements Checklist」からファイルをダウンロードして環境にアップロード。 プラグインを有効化すると「設定」に「Post Type Requirements」という項目が追加さ