gt

Hugo + Algolia + Instantsearch.jsで、静的サイトに全文検索を導入するまでの一部始終をまとめてみました。 完成版 メニューバー右側のテキストボックスに検索キーワードを入力して、Enterキーを押します。 検索したキーワードにヒットした記事が表示されます。 最低限の実装です。テーマに合わせた検索結果の表示...
CSSフレームワークの「Bulma: Free, open source, and modern CSS framework based on Flexbox」のcolumnsクラスの挙動がおかしい、というお話です。 Columns responsivenessは、Flexboxをベースとしたレスポンシブなレイアウトを簡単に定義できます。ところが、以下のシンプルなコードをみてください。 <html> <body> <div class="columns is-desktop"> <div class="column">1</div> <div class="column">2</div>...
静的サイトの悩みの種、サイト内検索をNetlify Functions+Hugoで実装してみました。ポイントは、以下の通りです。 クライアントであるブラウザにとって負荷の低い実装方法とする 記事の更新の都度、インデックス等の更新にかかる運用が発生しないようにする(自動的に行う) Hugoの機能、ある程度の月...
HugoのMarkdownで数式組版ライブラリであるKaTeXをサポートするで、Hugoに\(KaTeX\)を組み込みました。\(KaTeX\)は、MathJaxより高速にレンダリングできる、ブラウザで動作する数式組版ライブラリです。 今回は、Netlify CMSのプレビューで、リアルタイムで\(Ka...
Hugoで、\(KaTeX\)というブラウザで数式を表現するためのライブラリをサポートする方法です。Hugo 0.70.0(Extended)で正常に表示されることを確認していますが、今後のバージョンアップ等により、以下の方法がサポートされなくなる可能性がありますので、ご注意ください。特に、Markd...
Hugo のオリジナルテーマ作成を勝手に応援する企画、記念すべき第 1 弾はテンプレート構文の基本となる「template」「partial」「block」「define」の違いについてです。以下のバージョンで確認しています。 Hugo Static Site Generator v0.53/extended darwin/amd64 BuildDate: unknown Hugo のテンプレート構文 Hugo にはさまざまなテンプレート構文が用意されています...
Hugo には、記事執筆時点において、WordPress のような便利なプラグインはありません。しかし、Shortcode やテンプレートの構文を工夫することで、WordPress と同等のプラグイン機能を実現できます。 Hugo Static Site Generator v0.52/extended darwin/amd64 BuildDate: unknown たとえば、WordPress にはアイキャッチ画像という概念があります。Hugo...
Docker For Macを使用すると、あらかじめ用意されたイメージ(テンプレート)を使用して、簡単にWordPress環境を構築できます。ローカルの開発環境の場合、インターネット接続環境であれば、ものの数分でWordPress環境を作成できます。また、イメージのダウンロードは初回のみで、次回以降は数秒でWordP...
システム環境設定をターミナル(defaultsコマンド)から設定する方法(一般) – OTTAN.XYZに引き続き、defaultsコマンドシリーズです。今回は、「Mission Control」編です。ニッチな機能、追求するのがムダな機能は割愛しています。 システム環境設定をターミナルから設定する(Mis...
先日、WordPress の本文に App Store の URL を貼り付けるだけで、アフィリエイトリンクを生成できるようにするで、App Store の URL を WordPress の本文に貼り付けるだけで、アフィリエイトリンクを作成する方法をご紹介しましたが、今回は Amazon 版です。 Amazon の商品情報を取得するためには、Amazon Product Advertising API を使用します。この API の制約の 1 つ...
WordPressのショートコードとは、いわゆる「ショートカット」のように機能します。たとえば、代表的なショートコードとして[[gallery]]がありますが、これは記事中に[[gallery]]と記述することで、簡単にイメージファイルのサムネイルを呼び出すことができるものです。今回は、ショートコー...
MarsEdit は、macOS で動作する WordPress や MovableType などの主要な CMS に対応しているエディターで、とくにリアルタイムプレビューや AppleScript との連携は非常に便利です。 弊サイトでも、過去にMarsEdit をより便利に高速に活用するためのスクリプト集や、Alfred と連携したWordPress の過去記事参照に!Alfred から記事を検索...
WordPressで閲覧数の多い人気記事を表示するプラグインは数多くありますが、今回はプラグインの力を借りずに自力で実装してみたいと思います。 そもそも、データベースを有するWordPressにおいて、なぜ簡単に閲覧数の多い記事を表示できないか。それは、WordPressのデータベースには、閲覧数を保...
プラグインを使用せずにソーシャルネットワークからシェア数を取得する方法のサンプルです。WordPressにはさまざまなプラグインが用意されており、また公式ボタンを使用した方が簡単です。今回はjQueryの勉強も兼ねて自力で作成してみました。 サンプル サンプルをご用意しました。サンプルについては後ほど詳...
WordPressではさまざまな方法で投稿を取得できます。今回は、その中でもよく使われる手法についてまとめました。なお、簡略化のため、説明は WP_Query に渡すパラメーターのみとし、特段の注意点がなければ前後の処理は省いています。大まかな処理の流れは以下の通りになりますので参考にしてください。 $r = new WP_Query(); if ( $r->have_posts() ) {...
Homebrew については、Mac でプレゼン資料に数式を貼り付けるのに便利な「LaTeXiT」で詳細を解説していますのでご覧いただくとして、Homebrew で便利なアプリケーションを検索している時に、GitHub のエラーが表示されてしまう事象の対処法をメモしておきたいと思います。 Homebrew でエラーが発生した場合の対処法 $...
Twitter Bootstrapを用いたWordPressテーマは数多く配信されています。その中からピックアップしてカスタマイズしても良いのですが、それでは面白味がありませんので、極力そういった類いのツールは借りず、自作に近い形でテーマを作成したいと思います。 簡単にレスポンシブに対応したデザインが作成できる「I...
Twitter Bootstrap 3を用いてWordPressテーマを作成しよう①までで、Initializrを使用したプロトタイプの作成から、ヘッダー、フッターの分割までを行いました。今回は、メインとなる投稿一覧の表示部分をカスタマイズしていきたいと思います。前回の記事をまだご覧になっていない方はそちらからご覧ください。 Twitter Bo...
Twitter Bootstrap 3 を用いて WordPress テーマを作成しよう ②は、Twitter Bootstrap の根幹となるグリッドシステムのご紹介から、メインコンテンツにアイキャッチ画像、タイトル、投稿の内容を表示させる、など盛りだくさんの内容でした また、その中で、the_XXXX() 関数とget_the_XXXXX() 関数の違い、the_post()...
投稿ページの作成 Twitter Bootstrap 3 を用いて WordPress テーマを作成しよう ③まででメインとなる「index.php」では投稿一覧の表示まで行いました。今回は、投稿の個別ページを表示する「single.php」を作成します。「index.php」からリンクされたページは、WordPress により「single.php」に誘導...