サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
capitalp.jp
WP TAVERNが報じるところによると、WordPressの共同創業者Matt Mullenwegの経営するAutomatticがNew Vectorに4,600万ドルを出資したという。New VectorはMatrixというオープンコミュニケーションスタンダードの開発者たちが創業した会社である。 要するに、オープンソース版のSlackのようなものを開発できるツールに強みを持つ会社にWordPressのリーディングカンパニーが出資したような形だ。 Matrixとは? Matrix自体は分散型(decentralized)のコミュニケーションプラットフォームで、メッセージング、暗号化、VoIPなどのコミュニケーションのための技術の集合体のようなものだ。ソフトウエアというよりはもう少し低レイヤーの集合体といってよいだろう。LINEやFacebookメッセンジャー、Slackなどのツールを作る
二ヶ月ほど前に WordPressによる公式Dockerコンテナである wp-env がリリースされたが、現在は日本語ドキュメントの整備も進み、かなり成熟してきたようだ。 wp-envの特徴 さて、wp-envはDockerのnpmラッパーといった趣で、次のような .wp-env.json をリポジトリに用意しておくことで、開発環境がまるっと用意できる。 { "core": null, "plugins": [ "." ] } Dockerを利用したWordPress開発環境はいくつかあるが、利点は下記の通り。 公式でサポートされている。たとえば Docker がリリースしているWordPressイメージなどはファイルパーミッションなどがやや微妙だった。DockerとNode(v12以上)がインストールされていれば、環境を再現できる。追加ソフトウェアのインストールは不要(というより、npm
WordPress受託業界では、HTML+CSS+JSが完全に組まれたモックアップを渡されてそれをWordPressテーマにするということが多くある。最近ではKunoichi MarketというWordPressのマーケットプレースを作ってもいるので、汎用テーマを作る機会も多い。 そんな中、CSSフレームワークを利用したモックアップがWordPressのマークアップに適さないというケースが多々ある。今回はBootstrapを例に挙げ、CSSフレームワークを採用する際のティップスを紹介しよう。 秘訣1. コンパイルしよう Boostrapのみならず、多くのCSSフレームワーク・ライブラリではCDN版が用意されているため、URLを書くだけで簡単に導入できる。 <?php // Bootstrapを読み込み wp_enqueue_style( 'bootstrap', 'https://stac
COVID-19によってWordCamp Asia 2020が中止された頃は「ちょっと大げさだったんじゃないの?」と思ったものだが、まさかWHOによってパンデミックと宣言されるまでになるとは思いもよらず、自宅勤務を余儀なくされる毎日である。 さて、今回は「アイキャッチ画像の設定パネルに説明文を追加する」という非常によくありそうなTipsを紹介する。 WordPressに慣れ親しんでいると忘れがちだが、「アイキャッチ画像」というのはあまり一般的な用語ではない。「外連味けれんみのない記事」というぐらい一般的ではない。また、テーマ次第では必ずしも投稿のシングルページに表示されるとは限らないので、次のような要望はよく上がるだろう。 「アイキャッチ画像」を「ヘッダー画像」や「カバー画像」に変えたい。どこに表示されるかについての説明文を追加したい(例・この画像は記事一覧ページと個別記事ページに表示され
Gutenberg導入以前からカスタムフィールド製造業界では「入稿の制限」を目的としてACFなどが活用されてきた。多くの場合、レイアウト上の工夫や入稿フローの固定化(e.g. ライターへの説明を省く)が目的なのだが、似たようなことはブロックエディターでも活用できる。 ただ、「ブロックを作るのが大変」という人も多いと思われるので、今回は既存のブロックを組み合わせただけのブロックの作り方を紹介しよう。以前紹介したブロックの入れ子をもっとカジュアルにしたやり方である。 たとえば、下記の様なレイアウトを想定する。 画像は人気テーマOceanWPのデモから。 これはよく見るブロックで、基本的な構成要素は以下の3つ。 画像(アイコン)見出しテキスト(段落) いずれもコアブロックとして含まれているものなので、三つ組み合わせれば完成だ。このためには InnerBlocks のテンプレート機能を利用すること
Gutenbergプロジェクトの目標の一つに「テーマやプラグインと同じ公式リポジトリをブロックのために作る」というものがあったが、そのデザインプロトタイプが公開された。 ブロックディレクトリのサンプルデザイン。 Figmaによるモックアップも公開されており、現在開発中のデザインを見ることができる。ざっと見た感じ、プラグインディレクトリと似たような作りなことがわかる。Gutenbergプラグインの「実験中」というところでブロックディレクトリは有効にできる(が、いまのところ画面は表示されない?) 公開されているモックアップ。Figmaにアカウント登録すれば誰でも見られる。 モックアップに上がっている画面としては、ブロック管理画面(ブロックのオンオフが選べる)や再利用ブロック管理画面(いままでのUIでは見つけづらかった)が追加されており、「なぜいままでなかった?」という機能も実装されそうだ。 こ
Gutenbergとは単にブロックエディターに留まるのみではなくて、Webサイトの編集体験を完全に作り替えるプロジェクトであるということはこれまでもWordPressコアチームから主張されてきた。現在のブロックエディターはそのフェイズ1ということだ。 フェイズ2は「サイト全体のブロック化」ということが言われていてのだが、具体的にそれをどう実現するのかについて草案が公開された。ドキュメントはGithubに公開されている。 ざっとまとめると次の通り。 テンプレートファイルがHTMLになっており、それが多くのテーマ製作者に衝撃を与えている。Gutenbergプラグインの設定から設定をオンすることで”Full Site Editing”機能がオンになるようだ。テンプレートの登録などはおそらくPHPから行う(これはブートスラップファイルがPHPである以上、当然のこと) とりわけ「テンプレートがHTM
WordPressにおけるカスタムフィールド製造業界の超定番プラグインといえば Advanced Custom Fields 略してACFであり、そのプロ版を利用している人も多いだろう。「課金ポイント」としてはリピーターフィールド、つまりフィールドのセットを任意の数だけ繰り返せるという機能が人気だ。 そんなACFだが、一ヶ月前ほど前に価格帯をサブスクリプションモデルに移行することを発表しているのをご存知だろうか。”New ACF PRO Pricing for 2020” では、来年2020年から次のようなモデルに移行するとのこと。2020年以前に購入した顧客はアップデートを継続して受けられるので、買うならいまのうちに。 サイト数によって価格が異なるが、ACFが売りたいのはAgency $249 / 1yearだろう。 これまでは100オーストラリアドルで買い切りだったことを考えると、大幅
Googleが10月31日に公式ブログにおいてSite Kitのリリースを告知した。現在はプラグインディレクトリから誰でもインストールできるようになっている。 2日前、つまり日本時間の11/1にリリースされている。 Capital Pではベータ版の頃から取り上げていたが、なぜこのタイミングかというと、11月1日から開催されていたWordCamp US 2019に間にあわせるためだろう。GoogleがWordPressに注力し始めていることは何度かお伝えしているが、WordCamp USというビッグインベントに合わせて目玉となる製品をしているというわけだ。 Site Kit ファーストインプレッション さて、このサイトCapital Pでも早速インストールしてみた。まずはGoogleアカウントと接続。 Googleアカウントとの接続を促される。 続いて、接続の際に認証を求められる。 接続が完
これまでブロックの作成方法などについて触れてきたが、Twenty Twentyなどに見られるように、WordPressコアやプラグインの提供するブロック機能に依存し、あくまでスタイルの拡張に徹底するというのも一つの戦略ではある。 カスタムブロックについて「自分はプログラマーではないのでちょっと……」などと思っている人でも手軽にできる、ブロックスタイルの追加方法を説明する。 スタイルの登録 Gutenbergのデフォルトブロックのうち、たとえば区切り線は「スタイル」という概念がある。 区切り線、要するに hr はスタイルを選ぶことができる。 この実装がどうなっているかというと、スタイルを選ぶごとにCSSのクラスが付与されるという形だ。hrを例にとると、デフォルトで以下の3種類。 上から順に、次の様なクラスが割り当てられている。 クラスなしあるいは is-style-defaultis-sty
このCapital Pが日本語におけるそれであればよいと思うのだが、WordPressに関する高度な情報を入手できる英語メディアがいくつか存在する。そのうちの一つ、MasterWPというニュースレターから転載されたブログ記事 “The End of WordPress Themes is in Sight” に興味深いテーマについて意見が載せられていたので紹介しよう。 ブログの主張をかいつまんで紹介すると、次のようになる。 WordPressコアチームが現在開発中のコンテンツエリアのデモを見ると、WordPressはサイトビルダーに進化するようだ。テーマの役割は減っていき、最終的にはスタイルシートとJSONのような設定ファイルだけになる。WordPressのデザインは一貫性を欠いてはいるが、ともかくブロックやレイアウトを決定するのはコアやプラグインの役割となり、テーマはそれらの見栄えを調整
GoogleがWordPressプラグインNative Lazyloadプラグインをリリースした。このプラグインはその名前の通り、Lazy Loading(画像などの遅延読み込み)を実現するもの。画像読み込みでロックされるレンダリングを早くしようというものだ。このサイトCaptal Pでも導入してみたので、気になる方はチェックしてみてほしい。もっとも、そんなに画像をたくさん使うサイトではないので、効果は限定的だろうが……。 さて、こうしたLazy Loading系のプラグインはいままでもたくさんあったのだが、Googleがリリースしたこのプラグインの特徴はブラウザ実装の機能を使うという点。既存のLazy LoadingはJavaScriptなどを利用して画像を一時的にプレイスホルダーに置き換え、スクロールイベントなどを監視して画像を再度差し替えるものが多かった。しかし、Native Laz
WordPressではGutenberg用にすでにe2eテストが採用されている。e2eとは、End to Endの略で、要するに実際にブラウザを立ち上げて、ログインできるか確認するというテストだ。利用されるツールは次のようなものがある。 Puppeteer: Chromeのヘッドレスモードを利用してブラウザを操作するツールJest: JavaScript用のテストツールJest Puppeteer: JestからPuppeteerを利用できるようにするツール 具体的なテストコードを紹介すると、次のようになる。 const { createURL } = require('@wordpress/e2e-test-utils') describe('WordPress サイトのトップページをテストする', () => { // トップページに移動する beforeAll(async () =>
すでにTechCrunchなどが報じているが、WordPress創業者であるMatt Mullenwegの会社Automatticがtumblrを買収した。買収金額は明らかにされていないが、Axiosによれば「2,000万ドルのちょいかなり下」つまり、20億円をはるかに下回るぐらいの額だそうだ。 tumblrは創業当初こそ「マイクロブロッギング」と「リブログ」という概念を引っさげたスマートなブログメディアとして注目を浴び、ユーザーも拡大した。しかし、マリッサ・メイヤー率いるYahoo!に買収されたあたりから伸び悩み、損金計上(=買収は失敗だったとする会計処理)された上でVerizonに売り渡された。それが巡り巡って長年ライバルであったWordPress陣営に吸収された形だ。 WP TAVERNによれば、MattはPostStatusのSlackに降臨し、このディールについてのQ&Aを行なっ
Googleによる新しいプラグイン、サイトキットの画面 サーチコンソール、アナリティクス、アドセンス、ページスピードインサイトを一括で表示する Googleは昨年末に開催されたWordCamp US 2018で発表していた、Site Kitの開発者版ベータを公開した。今すぐダウンロードして試すことができるが、本番環境ではまだ利用しないほうが無難だ。 Site Kitは、Googleによる公式プロジェクト。WordPressの管理画面内でGoogleが提供している各種ツールの情報を一括してみることができる。ベータ版では、サーチコンソール、アナリティクス、アドセンス、ページスピードインサイトの情報が表示され、ひとつひとつにログインしなくても、あるいは、各種サービスにアカウントがないユーザーであっても、Sitekitを通じて諸々の情報を確認することができる。 かなり強力そう また、以下の機能も含
WordPressには Statistics というページがあり、WordPressに関する統計情報を見ることができる。それによると、WordPress 5.0 以上にしているユーザーは50%強といったところで、まだ半数近くが5.0未満に止まっているようだ。 Statsより。2019年6月20日現在の値。4.9が25.7%もいる。 やはりクリティカルな理由としては5.0から採用されたGutenbergことブロック・エディターなのだろう、バージョン4.9の多さが際立つ。そこで筆者はtwitter上で簡単なアンケートを取ってみた。こちらがその結果である。 WordPress 4.9以下にとどまっている人が半分ぐらいいるワン! 特に4.9が26%と多い模様。よかったら5.0にしない理由を教えて欲しいワン!https://t.co/zBcYWoHMzD — Capital P (@capitalP
言いたいことは表題に尽きるのですが、その背景や将来、盛り上がっているコメントについてまとめてみます。 この記事は、XML Sitemaps Feature Project Proposalをもとにしています。 明らかなニーズ 提案のポストによれば、WordPressのプラグインのTOP15のうち4つ(上から順番に、Yoast SEO, Jetpack, All in One SEO Pack, Google XML Sitemaps)が、XMLのサイトマップの生成に関連する機能を提供しており、その需要は明らかです。このようなニーズがあるのにもかかわらず、現在のWordPressはデフォルトで対応をしていない状況を受けて、今回のプロポーザルが始まりました。 GoogleとYoastが主導しているようだ 今回のプロポーザルの特徴は、Google、Yoastというビッグネームが提案者にいることで
Gutenbergで導入されたブロックは、WordPressの投稿編集体験を根底から覆すものであり、それはとくに投稿画面に多くのメタボックスを作成していたカスタムフィールド製造業者に打撃を与えた。これまで投稿本文(多くの場合は消されている)+メタボックスというレイアウトだったものが、すべてブロックの並びとしてブロックエディターに統合されてしまったからである。 では、これまでメタボックスを作成していた人々はどうなるのかというと、JavaScript(React + ESNext)での開発に移行していくことになる。Capital Pでもこれまで何度かに渡ってその手法をお伝えしてきた。 しかしながら、TypeScriptで敗北することはおろか、それ以前のJavaScriptに敗北してしまってなかなかGutenbergに移行できていない人は多いのではないだろうか。そんな悩みは万国共通のようで、PH
プログラミングについて教える12万円の情報商材がひどいということがSNSなどで話題になっている。筆者の観測する限り、発端は下記のツイート。 弟が12万のプログラミング教材買おうとしてて中身見たけどようこんなの12万で売ってるなって内容だった。 初心者を馬鹿にするのもいい加減にしろって感じだわ。 — 宮水 (@rails_java_like) May 9, 2019 この12万円の教材というのは、おそらくマナブというブロガー・アフィリエイターのプログラミング独立の完全ロードマップだろう。内容は次の通り。 1.PHPとSQLの基礎を理解しよう 2.jQueryの基礎を理解しよう 3.WordPressの基礎を理解しよう 4.SEOの内部対策を理解しよう 5.WordPressの自作テーマを作ろう 6.鬼のコーディング練習道場(10本) 7.ポートフォリオサイトを作ろう 8.受注できる見積書を作
本日、WordPress 5.2がリリースされた。コードネームは”Jaco”で、目玉となるのは5.1から導入されたサイトヘルスと、何度か取り上げてきたリカバリーモードだ。 ダッシュボードではこの2つが大きくフィーチャーされている。 まず、サイトヘルスだが、これはリポート画面が大きく改善された。WordPressインストールに関する詳細が記載されているので、リポート時に役に立つだろう。 上記のようにステータスに関する説明が表示される。ローカル環境だとエラーがたくさん表示されそうな気もするが、その時点で「普通のユーザー」ではないのでがんばって解決しよう。 また、これらの設定をコピペする機能もあるので、フォーラムなどでは役にたちそうだ。もしホスティングサービスを提供しているなら、これらのリポートをCLIなどで送りつける機能を開発すると喜ばれるかもしれない。 こんな感じのリポートがコピペできる。
もうすぐリリースされるWordPress 5.2だが、新しくリカバリーモードが採用されるようだ。以前お伝えした「死のホワイトスクリーン回避」だが、追記にあるように、5.1での採用を見送っていた。 その理由としては、セキュリティに対する懸念が挙げられる。以前の提案では、「プラグインがエラーを起こしたら一時的にプラグインをオフにする」というものだったが、リリースも間近という頃になり「悪意のある攻撃によって任意のプラグインを停止させることができてしまうのでは」という懸念が持ち上がった。このため、5.1での実装を見送り、新たな「リカバリーモード」を採用することになったという次第である。 リカバリーモードとは? ブログの説明によると、WordPressが致命的なエラーを起こした場合…… ユーザーは「このサイトは現在技術的な問題が発生しています」という画面を見ることになる。twitterのクジラ画面の
先日、WordPressコアのテスト要件からPHP5.6未満がドロップされたことをお伝えしたが、コーディングスタンダードもそれに追従して変更されるようだ。makeブログに投稿された “Coding Standards Updates for PHP 5.6” によると…… 無名関数/クロージャー 無名関数は使ってもオーケー。ただし、フックにかけると削除できなくなるので、アクションフック・フィルターフックの引数としてはコアで使わない。テーマ・プラグイン内で使う分には開発者の自由。 // こういう風にしてしまうと削除できなくなるのでダメ。 add_filter( 'the_content', function( $content ) { return do_something( $content ); } ); // こういう使い方はオーケー。 $str = preg_replace_call
WordPressのmakeブログでは定期的にWordPressのシェアを報告しているが、ついに33.3%を超え、世界のトップ10,000,000サイトの3分の1がWordPressを利用しているという状況になったようだ。 Web制作業界で仕事をしていると、「WordPressはオワコン!」というまとめブログのような感想を見ることもあるだろうが、国内でも国外でもシェアは微増を続けているのがここ2年ほどのトレンドだ。このCapital Pでもたまにシェアを報告しているが、今年で3年目のCapital Pでも4%ぐらいの変遷を見ている。50年後には100%を超えているのではないだろうか。 冗談はさておき、Webの1/3というのはなかなかなインパクトだ。Googleのような企業がパートナーシップを結ぼうとするのもわからないでもない。これからしばらくGoogleのようなビッグネームによる参入が相次
さて、これまでBefore Gutenbergの連載では、ブロックの作り方などを説明してきたが、純粋にReactだけを使いたい場合やReactコンポーネントを作る方法については説明してこなかった。今回はその方法を説明しよう。 ポイント1. ReactおよびReactDOMは同梱されている WordPress 5.0以降、ReactおよびReactDOMは同梱されている。したがって、自分のプラグインなりテーマなりに含める必要はない。たとえば、 my-script.js が自分のプラグインのJSだとすると…… <?php // wp-elementを指定すると、reactやらreact-domやらが入ってくる。 // 依存関係に wp-element を指定する。 wp_enqueue_script( 'my-plugin-js', 'path/to/my-script.js', [ 'wp-
Web Designingは企業のWeb担当者をターゲットにしたWeb業界誌である。「悩める企業の皆さまへ!」というコピー文からもわかる通り、エンジニアやデザイナーといった専門職ではなく、Webサイトをビジネスのために利用している人、つまりWeb担当者をターゲットにしている。 本稿で取り上げるのは「CMS 2.0 Webビジネスの成否に直結する新時代の常識」というCMS特集である。Facebookのタイムラインで見かけておもわず「面白そうやんけ〜」(CV:大木こだま)と書店に立ち寄った次第だ。Captal P読者、つまりWordPressに関わっている人に向けて、内容をかいつまんで紹介したい。 CMS 2.0 特集の構成 WordPressも取り上げられているのだが、基本的な構成としては「WordPress VS エンタープライズCMS」といった印象の座組みである。 WordPressはコ
WordPress 5 から導入されたブロックエディタの Gutenberg は JavaScript で記述されたフロントエンドのプロジェクトで、 Node.js のパッケージマネージャーの npm で管理されています。Gutenberg は単一のパッケージではなく、多数のパッケージから構成されている巨大プロジェクトです。GitHub のリポジトリを見てみると、./packages というフォルダの中に大量のパッケージが同梱されているのが分かります。 たくさんの npm パッケージが 1 つのリポジトリに同梱されている このように 1 つのリポジトリの中に複数のパッケージを同梱するリポジトリの運用方法は monorepo (モノレポ・モノリポ)と呼ばれています。この記事では、モノレポのメリットやモノレポを実現するためのツールである Lerna を紹介します。 モノレポのメリット・デメリッ
2月21日 にリリースを予定している WordPress 5.1 では「サイトヘルスチェック」として次の2つの機能が実装されます。 「死のホワイトスクリーン」回避古い PHP バージョンへの警告 このうち、最初の件については既報のとおりです。プラグインの不具合等で画面が真っ白になり管理画面にログインできなくなる状態を通称で「死のホワイトスクリーン」と呼びますが、これを回避するコードを実装しています。 古い PHP バージョンへの警告 これまで WordPress は PHP 5.2.4 以降をサポートしてきましたが、2019年4月からは PHP 5.6 以上に、12月からは PHP 7.0 以上に最低要件を引き上げます。 WordPress 5.1 ではその事前通告として PHP 5.5 以下を使用している場合、管理画面に警告を通知します。なお、サイトの訪問者には警告は表示されません。 W
日本でのWordPressエージェンシーとして長いあいだ先頭を走り続けてきたDigital Cubeが提供しているShifterというサービスがAWSやサーバーレス方面に感度の高い人のあいだでジワジワ知名度をつけている。筆者は先日開催されたコミュニティイベント JP_GetShifter に参加してきたので、そのリポートをお送りする。 WordPressのホスティングサービスShifter CMSの隆盛から静的サイトジェネレーターの誕生 まず、静的サイトジェネレーターについて説明しよう。WordPressが象徴的なのだが、サーバーサイドスクリプト+RDBMSで動くCMSが2000年代初頭からずっと勢力を伸ばし続けてきた。Web2.0というバズワードを引くまでもなく、それがいかに革新的だったかわかるだろう。人類はHTMLやCSS、そしてFTPといったWeb開発の基本技術を知ることなくWebサ
2019年2月のリリースを予定しているWordPress 5.1は新機能を現在開発中。5.0ではGutenbergが大いにフィーチャーされたが、その影でパント(先送り)された機能も多い。WordPressは各メジャーバージョンで特定の分野にフォーカスした改善を行うことが多いのだが、本来4.9はPHP周りを集中的に改善する予定だったのだが、Gutenbergのリリースを急ぐためにそれらの改善が先送りされてしまっていた。 5.1で実装される予定の機能のうち、楽しみなものが「死のホワイトスクリーン」回避だ。WordPressはPHPで動作するフレームワークだが、プラグインやテーマに不具合があると、Fatal Errorが発生してサイト全体が真っ白になってしまっていた。 関数名が間違っている。 function を funciton と書いてしまったり。インストールされていない(かもしれない)拡張
次のページ
このページを最初にブックマークしてみませんか?
『Capital P – WordPressエキスパートによるデジタル・メディアハブ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く