WordPressとGatsbyを連携して高速なサイトを作る - 環境構築から基本的なページ作成まで
今回はWordPressとGatsbyを連携して高速なサイトの作る手順について説明します。 説明する環境は以下です。 macOS Catalina v10.15.5Visual Studio Code v1.57.0node.js v16.13.1react v17.0.1gatsby v4.11.2 WordPressとGatsby用の環境を作る WordPressで記事の更新を行い、Gatsby側でそのデータを受け取って実際のサイトに表示させるようにします。それはWordPress用のドメインと、実際のサイトを表示させるためのドメインの２つが必要になるということを覚えておきましょう。 今回は本番環境でサイトを表示させる方法については説明していません。環境構築の手順とGatsbyを使ってWordPressからデータを取得して基本的なページを表示させる方法について説明しています。 まずは環
WP-functions generator
metaリンクの削除 DNS Prefetchの削除（emojiを削除する場合は不要） 絵文字を削除 外部アプリケーションから情報を取得するタグを削除 フィード削除 rel=”canonical”タグの非表示 短縮URLの非表示 現在の文書に対する「索引」であることを示すタグ link rel=next等のタグ WordPressのバージョン情報を削除(5.6ではそもそも表示されない) デフォルトのjQueryを読み込ませない jsのパラメータに付与されるWordPressのバージョン情報を削除 タイトルタグ出力（直接titleを記述する場合は不要） 管理画面のカスタマイズ コメント機能削除（comment_form()の強制削除） 管理画面から「コメント」削除（wp-admin/edit-comments.phpでアクセス可能） Adminバーの非表示 AdminバーのWordPress
WordPress（ワードプレス）の初期設定方法と基本的な使い方
Web集客にとって大切なことの一つに、品質の高いコンテンツを作成することが挙げられます。ユーザーのニーズを捉えたコンテンツを作成することに注力したいので、Webサイトの制作や管理にはできるだけ時間やコストをかけたくない人も多いでしょう。 CMS（コンテンツ・マネジメント・システム）は、誰でも簡単にWebサイトの制作や管理ができるものです。その中でも代表的な存在であるWordPressは無料で利用でき、世界中の企業や個人に利用されています。 そこで今回はWordPressをこれから使いたいと思っている人のために、初期設定や基本的な操作方法をまとめました。 圧倒的に使いやすいCMS！見たまま編集のferret One 直感的な操作で、Webサイト・LP・フォームも作成も自分で完了！さらに、問い合わせの管理や効果測定もできてPDCAが高速に回ります。 WordPress（ワードプレス）とは Wo
【WP講座】WordPressで企業サイトを作ってみよう！超シンプルなオリジナルテーマ作成 | WPスイッチ
本講座ではWordPressで簡易な企業サイトのオリジナルテーマを作成する方法を紹介しています。 WordPressでは企業サイト向けのとても素敵なテンプレートが多数配布されており、それらを利用するのも賢い選択です。 ただカスタマイズが思うようにいかないこともあるので、HTMLやCSSを理解している方はゼロからオリジナルテーマを作って、必要な機能を追加していく方が思い通りのサイトを作る早道になるかもしれません。 対象と前提 HTMLとCSSを理解している方 FTPでファイルをアップロードできる方 WordPressの管理画面を操作したことのある方 ローカル開発環境等にWordPressがインストールされていることが前提※です WordPressのインストール方法の説明はありません。
WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA
ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ
WordPress 5.2 をチェックしています
WordPress5.2 beta1 が 公開されました。 WordPress5.2は 2019年4月30日 2019年5月7日に リリースされる予定なので いろいろチェックをしています。 その中で WordPress5.2で気がついたところを取り上げていきます。 これから追加・変更はあるかもですので説明や画像キャプチャ等と違う場合がありますのでご容赦ください。 リリースまでのスケジュールは WordPress 5.2 Development Cycle に載っています。 サイトヘルスチェック サイトヘルスチェックツールをが追加されました。ツール → サイトヘルス で サーバーの設定を確認でき、速度とセキュリティを向上させるヒントが得られます。 致命的なエラー保護 WordPress5.2 からプログラムのエラーチェックが入り、リカバリし易くなりました。 今までは PHPの記述を間違ったり
Before Gutenberg – 再利用ブロックの使い道を考えよう – Capital P – WordPressメディア
この再利用ブロックはおそらくカスタム投稿タイプとして登録されることになるようだ。 「JSONからインポート」とあるとおり、JSONでインポート・エクスポートできる。 次回以降はこの再利用ブロックはブロック一覧から呼び出すことができる。 さて、以上で再利用ブロックの作り方については終わりだ。続いて、その使い道を考えよう。 再利用ブロックの使い方 再利用ブロック＝作るのが面倒なブロック まず考えられるのが、「作るのが面倒なブロック」として登録していくことだ。「面倒」の定義も色々あるのだが、たとえばコンタクトフォームのようなものを考えてみよう。 筆者やCapital Pの読者のような方々にとって、「コンタクトフォームを作成してショートコードを貼り付ける」という作業はそれほど大変だとは思えないだろうが、文章を書くことをメインにしているライターなどにとっては触るのが怖い作業のはずだ。 普通の人はこれ
Gutenberg のブロックエディターで改行を複数使わずに段落や画像などとのスペース（間隔）をあける方法 – WordPress（ワードプレス）の使い方 | サポトピア
WordPress の投稿や固定ページで、画像や段落などのあいだにスペース（間隔）をあける際には、どうやっていますか。 やり方はいろいろとあるのですが、「改行（br）タグを複数使ってスペースを空ける」という方法が巷ではそこそこ使われているようです。それを実現するため、「改行を入れる専用のプラグインを使う」なんてこともよく聞きます。 Gutenberg のブロックエディターでもスペース（間隔）あけられるの？ Gutenberg のブロックエディターでは、改行（br）タグを使わなくても OK です。スペース（間隔）をあける「スペーサー」ブロックを使った方法を YouTube で動画にしましたのでご参考ください（動画は 4 分弱ほどで短くまとめています）。 中・上級者向け：「スペーサー」ブロックのソースコードはどうなっているの？ ここからはウェブサイト制作に少し詳しい方向けの話題となります。「ス
これを読めば分かる！WordPress5.0のGutenberg（グーテンベルク）のすべて
メジャーアップデートにより、Wordpress5.0では、従来のビジュアルエディタからブロック型のエディタであるGutenberg（グーテンベルク）に変わりました。 “Gutenberg” とは、WordPress の新しいエディター体験を作り出すためのプロジェクト名です。このプロジェクトのゴールは、誰でもリッチな投稿のレイアウトができるような、ブログ投稿や固定ページ編集における新しい体験を作ることにあります。 Gutenbergの特徴 少ないプラグインでより多くを実現 モダンで、マルチメディア重視のレイアウトを作成 すべての画面サイズと端末で動作 実際のサイトと同様に表示されるエディター Gutenbergの問題点とは？ 一見便利で進化したように見えるエディタGutenbergですが、問題点があるとすれば、現在のビジュアルエディタでカスタマイズをしている方は、それらの互換性がなくなったり
WordPress：Gutenbergをカスタム投稿で有効化する方法／有効化されないときの確認ポイント - NxWorld
WordPressでGutenbergをカスタム投稿で有効化する方法とGutenbergがカスタム投稿で有効化されないときの確認ポイントを紹介します。 以下で紹介している方法は、WordPress Ver 5.0.0で確認等行ったものです。 カスタム投稿を実装する際、とりあえず用意する程度であればfunctions.phpに下記のような記述で実装できます。 add_action( 'init', 'create_post_type' ); function create_post_type() { register_post_type( 'news', array( 'labels' => array( 'name' => __( 'News' ), 'singular_name' => __( 'News' ) ), 'public' => true, 'has_archive' =>
WordPressのブロックエディタ「Gutenberg」に対して私たち制作者が考えなくてはならないこと | ウェビンブログ | CMSのウェビングスタジオ
WordPress5.0がリリースされ、噂のブロックエディタ「Gutenberg」が正式実装されました。 現在私は、同じ構成で構築された、いくつかのWordPressサイトの運用のお仕事をしています。 そのサイトがGutenbergの導入でどのような影響を受けるかの検証と、それだけではなく、今後CMSを扱う立場としてGutenbergとどのように関わっていくかを、この週末に、ざっくりですが検討していました。 Gutenbergさんとどう付き合うか まず、投稿タイプなどを追加していない、WordPress5.0の基本の状態でGutenbergをひととおり試しました。 私は、10年前からブロックエディタを搭載していたことで知られる、a-blog cmsを長年使用しています。また、スマートなブロックエディタを実装しているブログサービス「g.o.a.t」を一年ほど利用していました。 その経験を含め
日本語 « WordPress 5.0 利用開始前に知っておくべきこと
WordPress 5.0 には、編集エディターの一新と、それに伴うデータ保存形式の変更という、かつてない大きな仕様変更が含まれています。そのため、従来の更新とは異なり、利用開始の際には、すべての利用者が対応のためのなんらかのアクションと決断を行わなくてはなりません。 編集者は、新しいエディターについての知識が必要となります。サイト開発者・管理者の方は、新しいエディターを取り入れたサイトが意図した通りに動作することを事前に確認してください。 新エディター Gutenberg ブロックエディターに備える WordPress 5.0 利用開始時にもっとも注意すべき点は、旧バージョンから更新、または、新規インストールを行った場合に、デフォルトのエディターが、従来のエディター（クラシックエディター）から新エディター （ブロックエディター、コード名 Gutenberg）に置き換わることです。これがど
テーマ を Gutenberg に対応させる時、最低限やっておく事 – ねんでぶろぐ
WordPress5.0では新しいエディタ「ブロックエディタ」が搭載されます。 公開画面では「ブロックエディタ」で入力したコンテンツはテーマ側が対応していなくても だいたい表示するようになっています。 【ブロックエディタ 公開画面】 管理画面(編集画面)では、テーマ のデザイン(公開画面) と同じデザインで編集できるようにする事で ユーザーは簡単にイメージ通りのコンテンツを作成する事ができます。 しかし デフォルト(ブロックエディタ非対応テーマ) では 管理画面(編集画面)では テーマのデザイン(公開画面)と だいぶん違う状態になっていますので それぞれテーマ側で対応しなくてはなりません。 【ブロックエディタ 編集画面(非対応)】 ※基本表示幅は 580px になっています。「Gutenberg を試してみよう」画像が大きいのは「幅広」設定になっているためです。 【ブロックエディタ 編集画
Gutenbergメモ Templatesとplaceholderを使う – WEBUTUBUTU
WordPressのGutenberg用のTemplatesが便利そうなので、多少試したことを記載しています。 Templates ハンドブックでは上記ページにあります。 特徴 PHPファイルに記述することで、予めブロックを配置した状態で書き始められる もともと用意されているcoreのブロックだけではなく、独自に作成したブロックも使用可能 attibutesの設定によるが、placeholderなどの指定もできる template_lockを記述して、「移動不可/追加不可/削除不可」と「移動可/追加不可/削除不可」の状態が設定できる 簡単に書けば、ひな形を作成して手間を減らせる便利な仕組みです。 既存記事での動作 テンプレートなしの状態から設定した場合、既存記事にはテンプレートの反映を拒否できる選択肢がでる テンプレートを反映後に変更した場合でも、反映前に配置されたブロックは消えない(テン
Before Gutenberg – WordPress 5.0になるまでに準備すべきこと – Capital P – WordPressメディア
先日、WordPress 4.9.8がリリースされ、Capital Pでも散々取り上げて来た新しいエディターGutenbergをテストするようダッシュボードでの呼びかけが始まった。 ダッシュボードに表示されるコールアウト。ついにこの日が来た……。 さて、Gutenbergは活版印刷術の発明者であり、人類の情報技術に革命をもたらした人物にその名をとられていることからもわかるように、革新的なプロジェクトである。 しかし、革新がもたらす創造の前には、必ず破壊がやってくる。これから訪れる大きな変化を乗り切るために、Before Gutenbergと題した連載を開始したい。本稿はその第一回である。 4.9.8になったら必ずやっておくべきこと さて、4.9.8にアップデートした方はご存知だと思うが、前述したコールアウトに「旧エディターをインストール」というボタンがある。人柱になるのが大好きな方でない限
WordPress の新エディター Gutenberg 雑感（テーマ開発者向け）
前述したハンドブックでも基本的なことはできるのですが、全ての API やコンポーネントの情報が載っているわけではないので、もう一歩進んだことをやろうとすると、どうやってやるんだ…となってしまいました。 Gutenberg はもうだいぶ API も固まってきたんじゃないかなぁと想像していますが、これまですごい勢いでどんどん開発されてきているので、ググってでてきた情報を試してみても動かなかったりすることがあります。 そこでおすすめなのは GitHub にある Gutenberg のリポジトリを覗いてみることです。つまりソースを見るということですね。プラグインとしてインストールした Gutenberg にはビルド後のファイルしか入っていないので見てもよくわからないのですが、リポジトリにはビルド前のファイルがあるので、コアブロックのソースファイルとかをみるとかなり参考になります。 「いや、難しくて
WordPress でポータルサイトを運用してみた話
WordPressで地域の会社や店舗、サークル団体などの情報を提供するにあたって、どのような仕組みを作ったのか、どう運用しているのか、競合とどう差別化してるか的な話をしたりしなかったりします
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
よしあかつき 🐾yStandard開発者 on Twitter: "@s56bouya スマホとかiPadでWordPressの更新するブログ記事の準備はしてるのですが、画像のリサイズとかまで考えると結構高度なことやらなきゃだし、 楽をするならプラグインとかで工夫しなきゃでそれはそれで大変だなと… https://t.co/LYA42wUNqw"
Loading...
Gutenbergを触ってみよう