WordPressタグのついた記事一覧

WordPress embed ショートコードで埋め込んだ YouTube 動画のレスポンシブ対応

WEB

やりたいこと

  • iframeタグの前後に任意のdivを挿入し、CSSでレスポンシブ対応させる
  • アスペクト比は16:9のみ対応とする
  • 動画の埋め込みには embed ショートコードを使用する
  • post_contentにあたる部分を置換するのではなく、embed機能のなにがしかにフックして書き換たい
  • 個別投稿かつYouTube動画の埋め込みにだけ効かせる

使用例

投稿本文での書き方

[embed]https://www.youtube.com/watch?v=wgp4pGbl_wU[/embed]

または

[embed]https://youtu.be/wgp4pGbl_wU[/embed]

※ショートコード変換走らないように大括弧を全角にしてます。

ソース

functions.php

参考:embed_oembed_html | Hook | WordPress Developer Resources

User Contributed Notes に寄せられていたソースを改変(そのままだと動作しなかったため)。

function wrap_oembed_html( $cached_html, $url, $attr, $post_id ) {
	if( strpos($cached_html,'youtube') !== false || strpos($cached_html,'youtu.be') !== false ){
		$cached_html = '<div class="embed-responsive">'.$cached_html.'</div>';
	}
	return $cached_html;
}
add_filter( 'embed_oembed_html', 'wrap_oembed_html', 99, 4 );

展開されるHTML

<div class="embed-responsive"><iframe title="ニガミ17才 MV「こいつらあいてる」(Nigami 17th birthday!! &quot;koitsura_ aiteru)" src="https://www.youtube.com/embed/wgp4pGbl_wU?feature=oembed" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="500" height="281" frameborder="0"></iframe></div>

CSS

参考:Components · Bootstrap

Bootstrap 3 にある Responsive embed のソースを抜き出した。

.embed-responsive{
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	padding-top: 56%;
}
.embed-responsive iframe{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	z-index: 0;
}

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

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

はてなダイアリーのXMLをパースしてCSV形式で出力しWordPressにインポートする

WEB

目的

はてなダイアリーに書いた記事を、はてな記法のままWordPressにインポートする

やりかた

  1. ダイアリーの管理画面から「はてなダイアリー形式」のxmlをエクスポート
  2. xmlをパースしてCSVに変換
  3. WordPressプラグイン「Really Simple CSV Importer」を使ってインポート
Read More