7年間使ってきたWordPressを捨ててContentful+Gatsby+Netlifyにしたら爆速になったし経緯とか教訓とか語るWordPressReactNetlifygatsbycontentful こんにちは、古都ことと言います。普段はブログやらなんやらをやっているのですが、今回ブログのお引っ越しをしたのでその経緯などについてお話ししたいと思います。 先にまとめ ブログをVPSとWordPressで7年間運営してきた 速度面やメンテナンス面でそろそろガタがきていた Contentful+Gastby+Netlifyの構成に移行した Lighthouseで高スコア叩き出せた 技術選択って難しいね 運営しているブログ Subterranean Flower Blogというブログをやってます。 主にフロントエンド周りのことを取り扱っており、たまにマリオ64の記事や、転職の記事などでも

#この記事は？ Wordpressの新エディタGutenbergをいじってて よく使いそうだと思ったコンポーネントをまとめていきます 追記編集していきます TextControl と TextareaControl テキスト編集のコンポーネント。 onChangeでイベントオブジェクトじゃなく中身の文字列だけが渡されるようになってるので、値の取り出しとかしなくていいので普通にtextareaとか書いちゃうより楽です。 const {TextControl, TextareaControl} = wp.components; registerBlockType('myPlugin/myBlock',{ edit({attributes,className,setAttributes}){ return [ <TextControl onChange={(newText1)=>setAttri

Node.jsのインストール 今回の開発環境の構築には「Node.js」というものが必要です。 こちらのページからパッケージがダウンロードできるので、インストールしてください。 ※Node.jsについてはこちらの記事が参考になります。 作業フォルダへ移動 開発環境の構築は「コマンド」を使って進めていきます。 Macなら「ターミナル」、Windowsなら「コマンドプロンプト」ですね。 今回はWordPressテーマ内にカスタムブロックの開発環境を構築する話なので、テーマ内の任意のフォルダへ移動します。 コマンドでの移動がよくわからなければ、以下の手順で進めることもできます。 「cd」と入力半角スペースを入力任意のフォルダをターミナルにドラッグ・アンド・ドロップエンターキーをクリック package.jsonの作成 最初に初期設定として以下のコマンドを入力してエンターキーをクリックします。 n

概要 みなさんこんにちはcandleです。今回は最近メジャーバージョンアップグレードがあったwordpressのgutebergでmarkdownがかけるよという話をします。 主題の通りなのですが、これまでwordpressはmarkdownを書くならプラグインのJP MarkdownやMarkdown EditorやWP-Markdownなどのを使って書く必要がありました。しかしOSSであるがためにやはり更新が遅かったり他のプラグインと干渉してエラーが出たりしました。もちろんgutenbergもまだ十分に問題なく使えるわけではありませんが、標準で導入されたのは大きいと思います。 早速使ってみましょう。 前提 wordpressのバージョンが5.0.0以上である gutenbergのmarkdownを使う wordpressの管理画面から「記事一覧」 から「新規追加」ボタンを押します。 最

このプラグインは WordPress の最新3回のメジャーリリースに対してテストされていません。もうメンテナンスやサポートがされていないかもしれず、最新バージョンの WordPress で使用した場合は互換性の問題が発生する可能性があります。 説明 Markdown Editor replaces the default WordPress editor with a Markdown editor for your posts and pages. This plugin uses the Jetpack Markdown module for converting Markdown into HTML and plays nicely with Jetpack if both plugins are installed. There are 4 editor layouts to ch

WordpressはそのままではMarkdown記法には対応していません。 QiitaのようにMarkdown記法でかければとても楽ですし時短になります。 Wordpressにプラグインをインストール 早速プラグインをインストールし対応していきます。 今回はまずこちらのプラグインをインストールします。 ダウンロードをクリック 保存したzipファイルをWordpressにアップロード。 これでMarkdownが使えるようになりました。 ついでに入れておくべきプラグイン ちなみにいつからかWordpressの仕様でこのプラグインだけを入れても投稿画面がうまく機能しません。 ですので従来のWordpressのエディター画面に戻してあげましょう。 使用するプラグインはこちらです。 これでWordpressで問題なくMarkdown記法で記事投稿できるようになりました。 Qiitaのようにプレビュー

説明 An all-in-on WordPress Markdown Plugin provides a variety of features such as Markdown editor, live-preview, image-paste, HTML-to-Markdown helper, and more.. 詳細なドキュメントを読んでください。https://github.com/terrylinooo/githuber-md. デモ ビデオでは次の手順が説明されています。 Convert HTML to Markdown by using HTML to Markdown tool. Photoshop から画像の選択範囲を切り取ってコピーし、Markdown Editor に貼り付けます。 Click “Update” button to save Markdown to

WordPressのエディターでMarkdown記法を可能にするプラグイン【WP Githuber MD – WordPress Markdown Editor】 普段からhtmlを触っている方にとってはWordPressでの記事投稿（特にビジュアルエディタ）ってすごく入力しづらくないですか？ 僕もそう思っていて、でもhtmlは書きたくないし...かといってビジュアルエディタは使いたくない。 どうしたら快適に入力できるか考えた結果Markdownならいい感じにいけるんじゃないかと思い導入したところ大変快適になりました！ そんな方法をご紹介します！ この記事を読むにあたって必要な知識 htmlの知識が最低限ある方 Markdown記法の知識

はじめに WordPressはページにアクセスするとPHPが動作してDBからデータをとってきて ページを都度都度作成してくれます。 そんなWordPressで作成したページでも、静的ページにしたいというときがありますよね。 もう少し具体的にいうと… AWSにEC2とS3を用意して、EC2にWordPress、S3に記事のHTMLを置いて、S3を公開したいというときがありますね。 ありますよね？ 今回はそんな時にWordPressで使用するWordPressのページを静的HTMLにしてくれるプラグインについて書きます。 同時に実際に使用したプラグインWP2Staticの感想も添えてみます。 メリットデメリット このWordPressの静的HTMLを生成してS3で公開することのメリットデメリットを考えてみました。 メリット HTMLなので、読み込みが速い（PHPを挟んでいない） S3にWord

意外なところに手を出してきたと思われるかもしれませんが、きっかけは WordPress ＆ Gutenberg なんです。 2015年の Automattic社 Matt Mullenweg 氏の "Learn JavaScript, Deeply" という言葉。そして、バージョン5.4までたどり着いた現在の WordPress と、見え始めた Block Based Theme。 世間では WordPress=PHP という認識がまだまだ強いわけですが、とっくに、Gutenberg=JavaScript（React）なわけです。 すでに見えている未来を考えれば、WordPress=JavaScript と言われる時代もそう遠くはないのではとさえ思います。 なので、自分たちも JavaScript（React）をもっと身近なものにしておかなければと動き始めました。 入門者の通常ルート通り、

個人レベルではなかなかないと想いますが、 複数人でブログの運営をするケースが組織の場合は結構多いと思います。 その場合、誰がどの記事を書いたかがわかる方がいいですよね。 WordPressでは「Fancier Author Box」というプラグインを使えば実現可能です。 Fancier Author Boxを使うとこんな感じに Fancier Author Boxプラグインと入れると記事下にこんな感じでプロフィールを表示できます。 →実際のページ このプロフィールの入力データは 「ユーザー」→「ユーザー一覧」→「自分の名前」 から編集できます。 こんな感じですね。 カスタマイズ方法 実はインストールしただけでは「この記事を書いた人」や「最近の記事」とは表示されていません。 英語で書かれています。これを日本語でわかりやすく直します。 メニューから「プラグイン」→「プラグイン編集」を選択します

WordPress5からブロックエディター（Gutenberg）が導入されました。 これに合わせて、WordPressコアに標準搭載されている各ブロックのデフォルトスタイルが記述されたCSSファイルが自動的に読み込まれるようになっているようです。 実際には以下のようなlinkタグが出力されていることが確認できるかと思います。 head内に追加された記述を確認してみる <link rel='stylesheet' id='wp-block-library-css' href='//example.com/wp-includes/css/dist/block-library/style.min.css?ver=5.0.2' type='text/css' media='all' />

webサイトの回遊性向上のためには、記事下への関連記事設置が有効です。 しかし、記事を書くたびに関係性の高い記事を探して紹介するのでは、手間がかかりすぎます。 そこで今回は、関連記事を自動で表示してくれるWordPressの無料プラグイン「Yet Another Related Posts Plugin」（以下、YARPP）を紹介します。 簡単な設定ですぐに使えるので、WordPress初心者でも心配なく導入できることもポイントです。 この記事では、インストールから基本設定、初歩的なカスタマイズまで紹介していきます。 cssなどが苦手な人でも手順通りに設定すればすぐに見栄えよく設置できるので、ひとつずつ確認していきましょう。 １．YARPPのインストールと有効化 手順1：プラグインを新規追加する ダッシュボード（管理画面）左のメニューから、①「プラグイン」＞②「新規追加」で、プラグイン検索