WEBカテゴリーの記事一覧

WordPress でカテゴリーアーカイブのURLに /category を入れたくない問題を力技で解決する

WEB

今回解決させること

カテゴリーアーカイブのURLから /category を取り除く

  • WordPressデフォルトのカテゴリーアーカイブのURL形式は以下。
    • /notes/category/カテゴリースラッグ/
  • このサイトでは、個別記事のURLを以下に設定している。
    • /notes/カテゴリースラッグ/記事ID
  • なので、上記にあわせてカテゴリーアーカイブのURLも以下のようにしたい。
    • /notes/カテゴリースラッグ/
  • つまり、カテゴリーアーカイブのURLから /category の部分を削除したい。

/category なしURLにアクセスした際の表示不具合を防ぐ

問題の挙動
  • カテゴリーアーカイブのURL形式は
    • /notes/category/カテゴリースラッグ/
  • なので、以下のURLは「正しくないURL」のはず。
    • /notes/カテゴリースラッグ/
  • が、実際にアクセスすると404にはならず、カテゴリーアーカイブの1ページ目が表示されてしまう。
何が困るのか？
  • カテゴリーアーカイブの2ページ目以降の正しいURLは
    • /notes/category/カテゴリースラッグ/page/2
  • なので、ページネーションのリンク先として生成される以下のURLは「正しくないURL」
    • /notes/カテゴリースラッグ/page/2
  • 実際にアクセスすると、こちらは404が表示される。
つまり

カテゴリーアーカイブURLから /category を抜いたURLにアクセスした場合、「1ページ目は問題なく見れるのに、2ページ目以降には行けないページが見れてしまう」状態になっている。

Read More

Facebook for Developers に登録してシェアダイアログ機能を使ったシェアボタンを設置する

WEB

概要

  • デフォルトのFacebookシェアボタンを使わないでFacebookのシェアボタンを作った
  • ざっくりした流れ
    1. Facebook for Developersに登録・アプリケーションを作成し、app_idを発行
    2. シェアダイアログを使ったシェアボタンを作成
Read More

YouTube Data API v3 を使って任意のプレイリストの動画情報をJSON形式で取得する jQuery + Ajax

WEB

概要

  • うちのサイトトップで出力しているYouTube動画埋め込みの出力に使っている仕組みの備忘録。
  • プレイリストの情報（入っている動画情報も含む）をJSON形式で取得するところまでをまとめた。
    • 応用としてチャンネル情報＆検索結果も取得して遊んでみた。
  • 実際にiframe等HTMLで出力するにはJSONをパースして組み立てる必要あり。
Read More

YouTubeチャンネルのRSSフィードをPHPでパースして出力する

WEB

概要

  • YouTubeチャンネルは、以下のようなURLでRSSフィードを吐いてる。

https://www.youtube.com/feeds/videos.xml?channel_id=【チャンネルID】

  • これをPHPのsimplexml_load_file関数で読み込み、パースして出力する。

サンプル

Read More

jquery.qrcode.js を使用して生成したQRコードをPNG画像として保存する

WEB

jquery.qrcode.jsとは

jquery.qrcode.js

http://jeromeetienne.github.io/jquery-qrcode/

  • QRコードを生成するjQueryプラグイン
  • 画像は生成されず、tableタグまたはcanvasタグで描画することができる。
  • ソースはGitHubで公開されている。

使用手順

  1. GitHubから jquery.qrcode.min.js をダウンロードし、jQuery本体よりあとで読み込む
  2. HTML側に描画スペースを用意
  3. 用意した要素に対してjQueryスクリプトを記述
Read More

YouTubeのサムネイル画像をクリックしたら埋め込みiframeを読み込むjQuery

WEB

やりたいこと

  • 余計なデータ通信を発生させないために、YouTube動画のサムネイルをタップ・クリックしたときにだけ、埋め込み動画のiframeを読み込ませる。
  • 16:9のレスポンシブ対応をする。
  • サムネイル画像と埋め込みiframeで表示位置がズレないようにする。

サンプル

Read More

WordPressをコマンドラインで操作する「WP-CLI」を導入する

WEB

WP-CLI

導入するもの

「WP-CLI」とは

WP-CLI は WordPress を管理するためのコマンドラインインターフェースです。 プラグインのアップデートやマルチサイトのセットアップなどの多くのことをブラウザ無しで行うことができます。

Command line interface for WordPress | WP-CLI

Read More

EWWW Image Optimizerを有効化するとエラーが出るときの対処法

WEB

症状

  • 管理画面 > プラグイン から「EWWW Image Optimizer」を有効化するとエラーがでる

EWWW Image Optimizerを有効化するとエラーが出る

  • ツールフォルダが作れない

EWWW Image Optimizer could not create the tool folder: /home/homepage/public_html/notes/wp-content/ewww/. Please adjust permissions or create the folder.

  • 使用するプログラムがインストールされていない

EWWW Image Optimizer uses jpegtran, optipng, pngout, pngquant, gifsicle, and cwebp. You are missing: jpegtran, optipng, gifsicle. Please install via the Settings Page or the Installation Instructions.

Read More