[{"data":1,"prerenderedAt":332},["ShallowReactive",2],{"$ft6jtkd6xhw3c":3,"$f2nvyuowxluoh5":263},{"featured":4,"latest":129,"categories":227},[5,14,27,37,48,56,66,76,86,96,106,114,122],{"slug":6,"title":7,"date":8,"excerpt":9,"image":10,"categories":11},"custom-database-tables","Custom DataBase Tables","2015-11-24T02:29:34","You can create the new own table freely in the your WordPress database via this plugin. Then, you can make the management of table or (as view or entry or edit) data in a simple user interface.\\nAlso,","\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fcdbt-overview.png",[12],{"slug":13,"name":7},"cdbt",{"slug":15,"title":16,"date":17,"excerpt":18,"image":19,"categories":20},"10_php_tips_for_developers","PHP開発者が心得ておくべき10の鉄則","2016-01-11T18:38:09","PHPだけに限った話ではないが、プログラミングを行うに当たって、心得て、準備しておくと失敗が劇的に減る事柄をまとめてある良い記事を見つけたので、私なりの解釈で意訳しつつ、経験則を踏まえてあらためてまとめてみた。 オリジナ…","\u002Fassets\u002Fuploads\u002F2016\u002F01\u002Feyecatch-php-10-tips.jpg",[21,24],{"slug":22,"name":23},"column","コラム",{"slug":25,"name":26},"development","開発関連",{"slug":28,"title":29,"date":30,"excerpt":31,"image":32,"categories":33},"jquery-timeline-v1","2種類の横型タイムラインを簡単に作成できる「jQuery.Timeline」をリリース","2017-05-29T14:55:46","現在開発しているサービスで利用するべく、横型タイムラインを生成できるjQueryプラグインを自作したので、そこだけ単独でリリースしてみた。 ソースコード等はGitHubの方にリリースしてあるので、興味のある方は、そち…","\u002Fassets\u002Fuploads\u002F2017\u002F05\u002Fjquery_timeline_image.png",[34],{"slug":35,"name":36},"jqtl","jQuery.Timeline",{"slug":38,"title":39,"date":40,"excerpt":41,"image":42,"categories":43},"optimize-browser-cache-of-static-resources","更新されたJS、CSS、画像のみブラウザキャッシュを破棄して読み込ませる","2018-01-31T15:47:47","WEBサービスの保守や開発をやっていると、JavaScriptやスタイルシート、画像などの静的リソースを更新した際、しばしば「確認したけど、更新されてないよ」とか云われて、「ブラウザのキャッシュを消してからもう一度見て…",null,[44,47],{"slug":45,"name":46},"codes","コード集",{"slug":25,"name":26},{"slug":49,"title":50,"date":51,"excerpt":52,"image":53,"categories":54},"jquery-timeline","jQuery.Timeline version2 – full documentation","2019-03-04T20:40:48","Plugin Overview The jQuery.Timeline plugin provides you two types of the horizontal timeline. You can create a…","\u002Fassets\u002Fuploads\u002F2019\u002F03\u002Fjquery.timeline_v2.jpg",[55],{"slug":35,"name":36},{"slug":57,"title":58,"date":59,"excerpt":60,"image":61,"categories":62},"released-the-sloth","Released the Sloth of mobile-first CSS micro framework!","2019-04-16T18:04:25","I released the “Sloth” that is mobile-first CSS micro framework. I have long used frontend framewo…","\u002Fassets\u002Fuploads\u002F2019\u002F04\u002Fsloth_doc_head.png",[63],{"slug":64,"name":65},"sloth","Sloth",{"slug":67,"title":68,"date":69,"excerpt":70,"image":71,"categories":72},"challenge-to-conceal-the-wordpress-site","WordPressサイトを徹底的に秘匿化する","2020-02-02T23:59:58","私は自分の個人サイトをはじめ、仕事でもWordPressサイトを運用している。WordPressは気軽にサイトを立ち上げられてカスタマイズも簡単な、素晴らしいオープンソースなのだが、世界中で使われまくっているその知名度…","\u002Fassets\u002Fuploads\u002F2020\u002F02\u002Fshutterstock_1878005929.jpg",[73],{"slug":74,"name":75},"wordpress","WordPress関連",{"slug":77,"title":78,"date":79,"excerpt":80,"image":81,"categories":82},"what-is-forkor","Made a shortened URL app called Forkor","2020-07-07T22:27:01","What’s Forkor? Forkor is a service that provides a shortened URL feature that allows you to redirect any…","\u002Fassets\u002Fuploads\u002F2020\u002F07\u002Fforkor.png",[83],{"slug":84,"name":85},"forkor","Forkor",{"slug":87,"title":88,"date":89,"excerpt":90,"image":91,"categories":92},"manual-about-svg-japan","インタラクティブな日本地図を生成するJSプラグイン「SVG Japan」","2020-11-16T21:19:58","各都道府県をそれぞれ選択・クリック可能なインタラクティブな日本地図を生成するネイティブJavaScript建てのプラグイン「SVG Japan」を作ったので、その紹介と使い方をまとめておく。ちなみにソースコードはgit…","\u002Fassets\u002Fuploads\u002F2020\u002F11\u002Fsvg-japan.png",[93],{"slug":94,"name":95},"svg-japan","SVG Japan",{"slug":97,"title":98,"date":99,"excerpt":100,"image":101,"categories":102},"wp-ignitor-plugin-to-conceal-wordpress-site","WordPressサイトを秘匿化するプラグイン「WP Ignitor」","2021-01-19T15:28:21","以前「WordPressサイトを徹底的に秘匿化する」という記事で、WordPress建てのサイトを秘匿化する方法を取り上げたのだが、あれをサイト構築時に毎度実施するとなるととても労力が必要であった。そこで、もっとお手軽…","\u002Fassets\u002Fuploads\u002F2021\u002F01\u002Fbanner-1554x500-1.png",[103],{"slug":104,"name":105},"wp-ignitor","WPイグナイタ",{"slug":107,"title":108,"date":109,"excerpt":110,"image":111,"categories":112},"tastewp","無料でWordPressサイトを複数作成できるWEBサービス「TasteWP」","2021-03-25T20:21:59","私が日本語翻訳に協力しているWEBサービス「TasteWP」について紹介しようと思う。 https:\u002F\u002Ftastewp.com このサービス、サインアップすることなく無料で自分用のWordPressサイトを作れるとい…","\u002Fassets\u002Fuploads\u002F2021\u002F03\u002FTasteWP_screenshot.png",[113],{"slug":74,"name":75},{"slug":115,"title":116,"date":117,"excerpt":118,"image":119,"categories":120},"monster-hunter-rise-skill-simulator","モンハンライズのスキルシミュレータを作ってみた！","2021-06-28T20:24:52","コラムで連載していたNintendo Switch版『モンスターハンターライズ』のスキルシミュレータ開発がやっと一段落して一通り完了した。いやぁ、記事書きながら同時並行で開発すると思っていた以上に時間がかかるもんだなぁ…","\u002Fassets\u002Fuploads\u002F2021\u002F06\u002Fmhrss_v100.png",[121],{"slug":25,"name":26},{"slug":123,"title":124,"date":125,"excerpt":126,"image":42,"categories":127},"comparison-of-javascript-date-libraries","JavaScriptの日時ライブラリを比較してみた","2021-07-28T22:39:19","ネイティブJavaScriptで日時を取り扱う場合、ビルトインされているDateオブジェクトを使うことになるのだが、このDateオブジェクトは取り扱いにクセが多く、直感的に日時を操作できない点でも有名である。そこで、専…",[128],{"slug":25,"name":26},[130,141,153,165,175,184,192,195,198,206,213,220],{"slug":131,"title":132,"date":133,"excerpt":134,"image":135,"categories":136},"pulllog_launched","ガチャ履歴を記録・分析できるWebサービス「PullLog」","2025-08-22T13:05:30","このたび、新しい個人開発サービスとして 「PullLog（プルログ）」 をリリースした。 URLはこちら https:\u002F\u002Fpulllog.net PullLogとは？ PullLogは、ソーシャルゲームのガチャ履歴を記録…","\u002Fassets\u002Fuploads\u002F2025\u002F08\u002Fpulllog_stats_jp.png",[137,140],{"slug":138,"name":139},"industries","プロダクト",{"slug":25,"name":26},{"slug":142,"title":143,"date":144,"excerpt":145,"image":146,"categories":147},"mockapi-php-openapi-schema-generation","モックAPIのレスポンスから OpenAPI 3.0 スキーマを自動生成するPHPツール","2025-04-17T09:31:52","私自身がそうなのですが、OpenAPI仕様書を毎回手作業で書いていて「面倒だな」と思ったことはありませんか？ そんな（私と）あなたにぴったりのツールがあります。 レスポンスの例さえ用意すれば、OpenAPI 3.0 スキ…","\u002Fassets\u002Fuploads\u002F2025\u002F04\u002Fswaggerui-preview.png",[148,151,152],{"slug":149,"name":150},"mockapi-php","MockAPI-PHP",{"slug":138,"name":139},{"slug":25,"name":26},{"slug":154,"title":155,"date":156,"excerpt":157,"image":158,"categories":159},"ambient_playlist_customize","Ambientでメメントモリのラメントプレイヤーを作る","2023-11-30T17:32:39","「Ambient」の最新バージョン 1.2.0で実装した「疑似フェーダー」機能を使って、ソーシャルゲーム「メメントモリ」のYouTube公式チャンネルで公開されているMVを集約したラメント専用プレイヤーを作ってみた。 ラ…","\u002Fassets\u002Fuploads\u002F2023\u002F11\u002Fambient_mememori_1.png",[160,163,164],{"slug":161,"name":162},"ambient","Ambient",{"slug":138,"name":139},{"slug":25,"name":26},{"slug":166,"title":167,"date":168,"excerpt":169,"image":170,"categories":171},"released_ambient_demo_version","Ambientメディアプレイヤーのクラウド版デモを公開","2023-11-22T13:47:36","つい先日「Ambient」の最新バージョン 1.1.0をリリースして、それに合わせてクラウド版デモサイトも公開してみた。 なお、クラウド版デモでローカルのホストコンピュータのメディアを再生するには、そのメディアファイルも…","\u002Fassets\u002Fuploads\u002F2023\u002F10\u002FAmbientMediaPlayer-typologo.png",[172,173,174],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":176,"title":177,"date":178,"excerpt":179,"image":170,"categories":180},"ambient-media-player","YouTubeと自分のPC内メディアを同時に再生できるメディアプレイヤーを作ってみた","2023-10-20T00:00:25","私はよくPCで何か作業をするときには音楽を垂れ流していることが多い。 そういう時にかける曲は、手持ちのアルバムCD等からPCに取り込んだ音源だったり、さらにはYouTubeの動画だったりとメディアや再生環境がバラバラだ。…",[181,182,183],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":185,"title":186,"date":187,"excerpt":188,"image":189,"categories":190},"what-is-the-sunorhc","Sunorhc is a date-time library for JavaScript","2021-08-25T22:55:55","Sunorhc is a lightweight library for handling dates and times for JavaScript. The library wraps a native JavaS…","\u002Fassets\u002Fuploads\u002F2021\u002F08\u002Fshutterstock_1091212919_resized.jpg",[191],{"slug":25,"name":26},{"slug":123,"title":124,"date":125,"excerpt":126,"image":42,"categories":193},[194],{"slug":25,"name":26},{"slug":115,"title":116,"date":117,"excerpt":118,"image":119,"categories":196},[197],{"slug":25,"name":26},{"slug":199,"title":200,"date":201,"excerpt":202,"image":203,"categories":204},"mhrise-skill-simulator-creation-chapter-12","モンスターハンターライズのスキルシミュレータを作ってみる！ 第12回","2021-06-21T13:11:46","今回は「マイセット登録」と護石データの「エクスポート／インポート」機能の追加をしていく。折り良く（悪く？）「FF7リメイク・インターグレード」や「FORTNITEシーズン7」が出たこともあって、そっちをプレイしてたらこ…","\u002Fassets\u002Fuploads\u002F2021\u002F04\u002Fb6ca09e9a7f6faf27641f62dabe64c6ff97b4f326aa478379e3c112aa28eb9ab.jpg",[205],{"slug":22,"name":23},{"slug":207,"title":208,"date":209,"excerpt":210,"image":203,"categories":211},"mhrise-skill-simulator-creation-chapter-11","モンスターハンターライズのスキルシミュレータを作ってみる！ 第11回","2021-06-07T14:52:31","さて、今回はユーザー個別データの管理部分を開発していく予定だが、まずその前にやっておくことがある。 新スキル「風雷合一」に対応する Ver.3.0の大型無料アップデートで追加された新スキルに「風雷合一」というのがある…",[212],{"slug":22,"name":23},{"slug":214,"title":215,"date":216,"excerpt":217,"image":203,"categories":218},"mhrise-skill-simulator-creation-chapter-10","モンスターハンターライズのスキルシミュレータを作ってみる！ 第10回","2021-06-02T00:29:10","今回は、護石管理画面の作成だ。この護石管理では、ユーザーごとに護石の登録を行う機能と、登録した護石を削除する機能を持つ仕様になる。この画面から登録した護石データはデータベースに格納するので、フロントエンド側からのリクエス…",[219],{"slug":22,"name":23},{"slug":221,"title":222,"date":223,"excerpt":224,"image":203,"categories":225},"mhrise-skill-simulator-creation-chapter-9","モンスターハンターライズのスキルシミュレータを作ってみる！ 第9回","2021-05-22T23:56:27","さて、今回はVuexによるデータ・キャッシュの実装だ。一度データベースから読み込んだデータをフロントエンド側で再利用可能なストアに格納することで、データベースへの接続回数を減らしてシステム負荷を下げるとともに、UX的な…",[226],{"slug":22,"name":23},[228,230,232,236,238,239,240,241,242,244,247,248,250,252,254,258,261],{"slug":161,"name":162,"count":229},3,{"slug":13,"name":7,"count":231},7,{"slug":233,"name":234,"count":235},"csnp","Custom Sticky Notes",2,{"slug":84,"name":85,"count":237},1,{"slug":35,"name":36,"count":229},{"slug":149,"name":150,"count":237},{"slug":64,"name":65,"count":237},{"slug":94,"name":95,"count":237},{"slug":74,"name":75,"count":243},37,{"slug":245,"name":246,"count":237},"wpqt","WP Qiita",{"slug":104,"name":105,"count":237},{"slug":22,"name":23,"count":249},29,{"slug":45,"name":46,"count":251},16,{"slug":138,"name":139,"count":253},5,{"slug":255,"name":256,"count":257},"lifelog","ライフログ",64,{"slug":259,"name":260,"count":235},"uncategorized","未分類",{"slug":25,"name":26,"count":262},45,{"type":264,"post":265},"post",{"slug":266,"title":267,"date":268,"excerpt":269,"image":270,"categories":271,"modified":274,"html":275,"tags":276,"related":285,"prev":320,"next":324},"shortcode-that-can-translate-of-the-post-contents-at-any-time-when-you-need-them","後付けでコンテンツを多国語化できるショートコード","2016-02-19T12:17:38","現在、自分のプラグインのドキュメンテーションをしているのだが、将来的には今書いているドキュメンテーション系のコンテンツは多国語化しようと思っている。 では、いざ多国語化しようとする時に、実際にはどうやってやろうか…と、ふ…","\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fquick-translate-eyecatch.png",[272,273],{"slug":74,"name":75},{"slug":45,"name":46},"2021-03-24T23:55:15","\u003Cp>現在、自分のプラグインのドキュメンテーションをしているのだが、将来的には今書いているドキュメンテーション系のコンテンツは多国語化しようと思っている。\u003Cbr \u002F>\nでは、いざ多国語化しようとする時に、実際にはどうやってやろうか…と、ふと疑問がわいた。\u003C\u002Fp>\n\u003Cp>投稿自体を多国語化するプラグインなどは多いので、それらを使っても良いのだが、過去の経験上、それらのプラグインはどれもサイトのパフォーマンスを低下させてしまううえに、現在と同じ分の多国語化した投稿を作らなければならず、作業コスト的にも使いたくない。かと言って、テーマ側で多国語化に対応しようと思っても、基本的にページのコンテンツとなる投稿以外のテンプレート部分しか対応はできない。\u003C\u002Fp>\n\u003Cp>私的には「\u003Cstrong>後からでも簡単にコンテンツを多国語化できるような\u003C\u002Fstrong>」かなり都合の良いことをやりたいのだ。\u003C\u002Fp>\n\u003Cp>色々と考えていたら、一つの方法をひらめいた。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>翻訳したいコンテンツを後からショートコードで囲ってやると、そのコンテンツが多国語化候補にできる\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>──というようなやり方だ。\u003Cbr \u002F>\nそれほど斬新な発想でもないのだが、まぁ、後付けで多言語化する時の作業コストは低い方なので、やってみる価値はあるかもしれない…。\u003C\u002Fp>\n\u003Cp>──で、ドキュメンテーション作業の息抜き（笑）も兼ねて早速そのショートコードを作ってみた次第。\u003C\u002Fp>\n\u003Ch2>ショートコードの本体と使い方\u003C\u002Fh2>\n\u003Cp>下記のソースを利用しているテーマの\u003Ccode>functions.php\u003C\u002Fcode>などに追加してあげればショートコードが利用できるようになる。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u002F**\n * Convert to object or array from string like hash\n *\n * @param string $like_hash [required] String of the concatnation of between key and value at the double colon; it should be the comma-delimited if there is multiple\n * @param string $return_type [optional] String for return value specify whether the assoc array or the object; default is defined of \"array\"\n * @return mixed Return the value of specified type if it completed conversion, return false otherwise\n *\u002F\nfunction strtohash( $like_hash=null, $return_type='array' ) {\n  if ( empty( $like_hash ) || ! in_array( strtolower( $return_type ), array( 'array', 'object' ) ) ) \n    return false;\n\n  if ( empty( $_tmp_array = explode( ',', $like_hash ) ) ) \n    return false;\n\n  $_assoc = [];\n  foreach ( $_tmp_array as $_concat_str ) {\n    if ( strpos( $_concat_str, ':' ) !== false ) {\n      list( $_key, $_val ) = explode( ':', $_concat_str );\n      $_key = trim( trim( stripcslashes( trim( $_key ) ), \"\\\"' \" ) );\n      $_val = trim( trim( stripcslashes( trim( $_val ) ), \"\\\"' \" ) );\n      if ( ! empty( $_key ) && strlen( $_key ) > 0 ) {\n        $_assoc[$_key] = $_val;\n      }\n    } else {\n      $_concat_str = trim( trim( stripcslashes( trim( $_concat_str ) ), \"\\\"' \" ) );\n      $_assoc[] = $_concat_str;\n    }\n  }\n\n  if ( empty( $_assoc ) ) \n    return false;\n\n  if ( 'object' === strtolower( $return_type ) ) \n    return (object) $_assoc;\n\n  return $_assoc;\n\n}\n\n\u002F**\n * Quick translate of content and render that\n *\n * @param array $attributes [require] Array of attributes in shortcode\n * @param string $content [optional] For default is empty\n * @return string $html_content The formatted content\n **\u002F\nfunction custom_quick_translate() {\n  list( $attributes, $content ) = func_get_args();\n  extract( shortcode_atts( [\n    'wrap' => '', \u002F\u002F [optional] String of wrapping tag name\n    'attributes' => '', \u002F\u002F [optional] String like hash for adding attributes in tag (if it wrap at tag)\n    'text_domain' => '', \u002F\u002F [optional] String of text domain name for a multi-language of the theme you are using\n    'strip_tags' => true, \u002F\u002F [optional] Specifies by boolean whether to remove tags from wrapped content; Note: it will be removed p tag that wordpress automatically inserted even if you specified the false\n  ], $attributes ) );\n  $shortcode_name = '_e';\n  $render_html = '%s';\n\n  if ( ! empty( $wrap ) ) {\n    $_atts = ! empty( $attributes ) ? strtohash( $attributes ) : array();\n    $_render_atts = array();\n    if ( ! empty( $_atts ) && is_array( $_atts ) ) {\n      foreach ( $_atts as $_key => $_val ) {\n        $_render_atts[] = esc_attr( $_key ) .'=\"'. esc_attr( $_val ) .'\"';\n      }\n    }\n    $render_html = '<'. $wrap .' '. implode( ' ', $_render_atts ) .'>%s<\u002F'. $wrap .'>';\n  }\n\n  if ( empty( $text_domain ) ) \n    $text_domain = defined( 'TEXT_DOMAIN' ) ? TEXT_DOMAIN : '';\n\n  $text_domain = apply_filters( 'quick_translate_text_domain', $text_domain, $shortcode_name, $content );\n\n  $content = str_replace( '<\u002Fp>', \"\\n\", $content );\n  $content = str_replace( '<p>', '', $content );\n  if ( wp_validate_boolean( $strip_tags ) ) \n    $content = strip_tags( $content );\n  $content = str_replace( array( \"\\r\\n\", \"\\r\", \"\\n\" ), '\\n', $content );\n\n  return sprintf( $render_html, str_replace( '\\n', '<br>', __( $content, $text_domain ) ) );\n}\nadd_shortcode( '_e', 'custom_quick_translate' );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>使い勝手も考慮して、ショートコード名は極力短く\u003Cstrong>[_e]\u003C\u002Fstrong>にしてみた。\u003Cbr \u002F>\nなお、前半の\u003Ccode>strtohash()\u003C\u002Fcode>関数はショートコードの属性値で渡されたハッシュ型文字列をパースして配列化するユーティリティ関数だ。実はこっちの関数の方が色々なシーンで使える優れものな関数だったりするのだが、今回の記事からは外れるので詳しい説明は省略する。\u003C\u002Fp>\n\u003Cp>そして、肝心の使い方だが、いたってシンプルで、翻訳したいコンテンツをこのショートコードで囲ってやればよい。こんな感じだ。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>翻訳したいテキストなど\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>実際の投稿編集画面での使用例は下図を参照してほしい。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fquick-translate-added_shortcode.png\" alt=\"ショートコードの使用例\" title=\"ショートコードの使用例\" \u002F>\u003C\u002Fp>\n\u003Cp>なお、囲われたコンテンツをHTMLタグでラップしたい時などは次のように指定する。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Ca href=\"\u002F\u002Fwww.example.com\u002F\" target=\"_blank\" ref=\"no_follow\">翻訳されるリンクテキスト\u003C\u002Fa>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>これがWEBサイト側へ出力されると、\u003C\u002Fp>\n\u003Cpre>\u003Ccode><a href=\"\u002F\u002Fwww.example.com\u002F\" target=\"_blank\" ref=\"no_follow\">翻訳されるリンクテキスト<\u002Fa>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>──とタグにラップされるのだ。\u003C\u002Fp>\n\u003Cp>なお、注意点がある。WordPressが投稿の本文に自動挿入する\u003Ccode><p>\u003C\u002Fcode>タグの取り扱いについてだ。\u003Cbr \u002F>\nWordPressでは、投稿編集画面で本文に改行を入れると、直前の改行からその部分までが段落となり、自動的に\u003Ccode><p>\u003C\u002Fcode>タグで囲われる仕様だ。そのため、改行を含む投稿を\u003Cstrong>[_e]\u003C\u002Fstrong>で囲うと編集画面では見えない\u003Ccode><p>\u003C\u002Fcode>タグも囲われていることになる。\u003Cstrong>[_e]\u003C\u002Fstrong>のショートコードでは文章中に自動挿入されたタグがあるとうまく翻訳が適応されないため、\u003Ccode><p>\u003C\u002Fcode>タグを強制的に除去している。もし、翻訳後も本文内の段落を\u003Ccode><p>\u003C\u002Fcode>タグで囲いたい場合、今のところ段落ごとに\u003Cstrong>[_e wrap=”p”]\u003C\u002Fstrong>で囲うようにするしかない。\u003C\u002Fp>\n\u003Cp>ただ、このままだとショートコードに囲まれたテキストの翻訳はされない（下図参照）。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fquick-translate-compare-01.png\" alt=\"ショートコードの使用直後のサイト表示\" title=\"ショートコードの使用直後のサイト表示\" \u002F>\u003C\u002Fp>\n\u003Cp>今はこれでいいのだが、実際に多国語化する時（つまり後々）にはいくつかの手順を踏む必要がある。\u003Cbr \u002F>\n\u003Cdiv class=\"clearfix\" style=\"margin-bottom: 2em;\">\u003C\u002Fdiv>\u003C\u002Fp>\n\u003Ch2>後付けで多国語化をする\u003C\u002Fh2>\n\u003Ch3>1. テキストドメイン名を指定する\u003C\u002Fh3>\n\u003Cp>多国語化のための翻訳テキストは利用しているテーマの言語翻訳ファイル（.mo）を利用するのが簡単なので、まずは利用しているテーマのテキストドメイン名をショートコード用に定義してあげる必要がある。テキストドメイン名というのはテーマのテンプレートなどの翻訳テキスト部分で\u003Ccode>__( 'Translate Text', 'twentysixteen' )\u003C\u002Fcode>のように使われている第2引数の\u003Ccode>twentysixteen\u003C\u002Fcode>の文字列だ。\u003Cbr \u002F>\nわからない時はテーマフォルダ直下にある\u003Ccode>style.css\u003C\u002Fcode>のヘッダーコメント内に、\u003C\u002Fp>\n\u003Cpre>\u003Ccode>Text Domain: twentysixteen\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>──のように定義されているので、簡単に確認できる。\u003Cbr \u002F>\nこのテキストドメイン名をショートコードに設定するには、ショートコードの\u003Ccode>text_domain\u003C\u002Fcode>属性にテキストドメイン名を指定する、\u003C\u002Fp>\n\u003Cpre>\u003Ccode>翻訳したいテキストなど\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>──という方法がある。しかし、これだと記述が長くなってしまってショートコードを追加する作業コストがかさむので、テーマ側に定数として指定してしまうのが一番簡単である。\u003Cbr \u002F>\nつまり、利用しているテーマの\u003Ccode>functions.php\u003C\u002Fcode>などの中に、\u003C\u002Fp>\n\u003Cpre>\u003Ccode>if ( ! defined( 'TEXT_DOMAIN' ) ) \n  define( 'TEXT_DOMAIN', 'twentysixteen' );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>──と定数を定義してあげるのだ。これでショートコード側でこの定数をテキストドメインとして使用してくれるようになる。\u003Cbr \u002F>\nもし、既に同名の定数が定義済みだったりして定数指定が難しいようであれば、フィルターを追加することでも対応できる。その場合は、\u003C\u002Fp>\n\u003Cpre>\u003Ccode>function filter_my_text_domain( $text_domain ) {\n  $text_domain = 'twentysixteen';\n  return $text_domain;\n}\nadd_filter( 'quick_translate_text_domain', 'filter_my_text_domain' );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>──とフィルターを追加すればOKだ。\u003C\u002Fp>\n\u003Ch3>2. 翻訳したいコンテンツ用の多言語化リストを作成する\u003C\u002Fh3>\n\u003Cp>翻訳ファイル（.mo）を生成する方法は色々あるが、原文テキストと対訳を定義した.poファイルを作成し、そこから.moファイルを生成するという方法が最も一般的だろう。私の場合、\u003Ca href=\"https:\u002F\u002Fpoedit.net\u002F\">\u003Cstrong>Poedit\u003C\u002Fstrong>\u003C\u002Fa>というアプリケーションでそれらの作業を行っているので、ここではPoeditで.moファイルを作成する前提で手順を紹介していく。\u003C\u002Fp>\n\u003Cp>まず大抵のテーマには多言語用の翻訳ファイルを格納する\u003Ccode>languages\u003C\u002Fcode>のようなフォルダがあるはずで、その中には翻訳ファイルのテンプレートである.potファイルが入っている。.potファイルがあれば（なければ.poファイルでも良い）、一度テキスト・エディッターかPoeditで開いてみると、そのテーマで多言語化対象になっている翻訳候補のテキストが定義されていることが確認できるはずである。\u003Cbr \u002F>\nしかし、今回新たに\u003Cstrong>[_e]\u003C\u002Fstrong>のショートコードで囲われたコンテンツはこの翻訳候補に入っていないので、それを追加してやらないとPoeditで編集ができないのだ。\u003C\u002Fp>\n\u003Cp>そこで、テーマのフォルダ直下に\u003Ccode>extra_translate_text.php\u003C\u002Fcode>というPHPファイルを作成する。特にファイル名に縛りはないので何でも構わない。\u003Cbr \u002F>\n作成した\u003Ccode>extra_translate_text.php\u003C\u002Fcode>の中には、\u003Cstrong>[_e]\u003C\u002Fstrong>のショートコードで囲ったコンテンツを翻訳候補として下記のように定義していく。\u003C\u002Fp>\n\u003Cpre>\u003Ccode><?php\n$_domain = 'twentysixteen';\n$my_content = array(\n  __( '翻訳したいテキストなど', $_domain ), \n  __( '翻訳されるリンクテキスト', $_domain ), \n  ...\n);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>改行を含むテキストを翻訳する場合は、改行部分を\u003Ccode>\\n\u003C\u002Fcode>に置き換えてやる必要がある。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>__( 'この文章には改行が含まれています。\\n注意してください。', $_domain ), \n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>なお、\u003Ccode><p>\u003C\u002Fcode>タグ以外でHTMLタグを含んだテキストを翻訳リストに追加することも可能だ（\u003Ccode><p>\u003C\u002Fcode>タグのみはショートコードの方で自動除去されてしまう）。ただし、その場合はショートコードの方でタグを除去しないようにあらかじめ\u003Cstrong>[_e strip_tags=”false”]\u003C\u002Fstrong>と指定をしておく必要がある。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>__( 'HTMLの<em>タグ<\u002Fem>が含まれているテキストも翻訳可能です。', $_domain ), \n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>つまりは、投稿編集画面で本文をショートコード\u003Cstrong>[_e]\u003C\u002Fstrong>で囲ったら、囲った部分を\u003Ccode>__( '{囲った部分}', $_domain )\u003C\u002Fcode>として定義していくということだ。\u003Cbr \u002F>\nちょっと手間はかかるが、翻訳だけ後付けできるのはやはりメリットは大きい。\u003C\u002Fp>\n\u003Ch3>3. 翻訳ファイル（.moファイル）を作成する\u003C\u002Fh3>\n\u003Cp>翻訳候補の定義が終わったら、Poeditで.potを開いて、「翻訳プロジェクトを新規作成する」から翻訳する言語を指定して.poファイルを作成する（一度保存すること）。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fquick-translate-poedit-open_pot.png\" alt=\"翻訳プロジェクトを新規作成する\" title=\"翻訳プロジェクトを新規作成する\" \u002F>\u003C\u002Fp>\n\u003Cp>※ もし.potがない場合は、既にある.poファイルを開いて編集することになるので、翻訳プロジェクトを作成する必要はない。\u003C\u002Fp>\n\u003Cp>.poが作成できたらカタログの設定を行う。「カタログ」メニュー内の「設定」から「翻訳の設定」と「ソースの検索パス」と「ソース中のキーワード」を適宜変更して保存する（下図の設定例を参照）。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fquick-translate-poedit-setting01.png\" alt=\"翻訳の設定\" title=\"翻訳の設定\" \u002F>\u003Cbr \u002F>\n\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fquick-translate-poedit-setting02.png\" alt=\"ソースの検索パス\" title=\"ソースの検索パス\" \u002F>\u003Cbr \u002F>\n\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fquick-translate-poedit-setting03.png\" alt=\"ソース中のキーワード\" title=\"ソース中のキーワード\" \u002F>\u003C\u002Fp>\n\u003Cp>設定が終わったら、「更新する」（もしくは「カタログ」メニュー内の「ソースから更新」）を実行してソースからの同期を行う。\u003Cbr \u002F>\n同期が実行されると、先ほど\u003Ccode>extra_translate_text.php\u003C\u002Fcode>に追加したコンテンツが翻訳候補としてPoeditのソーステキスト欄に表示されるので、翻訳を行って「保存」すれば、晴れて投稿本文のコンテンツが翻訳するための.moファイルが生成される。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fquick-translate-poedit-edit.png\" alt=\"翻訳の編集\" title=\"翻訳の編集\" \u002F>\u003C\u002Fp>\n\u003Ch3>4. 多言語化の確認\u003C\u002Fh3>\n\u003Cp>さて、多言語化の確認をするためにはサイトの言語設定を変更する必要がある。\u003Cbr \u002F>\nこの設定変更は管理画面の「設定」メニューのサブメニュー「一般」から行える。下図のように、作成した翻訳ファイルの言語コードに合わせて、設定を変更してから翻訳対象コンテンツがあるWebページにアクセスしてみればよい。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fquick-translate-site_setting.png\" alt=\"サイトの言語設定\" title=\"サイトの言語設定\" \u002F>\u003C\u002Fp>\n\u003Cp>この状態で、翻訳コンテンツが含まれているページをブラウザで閲覧してみると、翻訳が反映されていることがわかる。\u003C\u002Fp>\n\u003Cp>\u003Cdiv class=\"clearfix\" style=\"margin-bottom: 2em;\">\u003C\u002Fdiv>\u003C\u002Fp>\n\u003Ch2>実例\u003C\u002Fh2>\n\u003Ch4>\u003Cstrong>WordPressの投稿内容\u003C\u002Fstrong>\u003C\u002Fh4>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fquick-translate-edit_post.png\" alt=\"実例 - 投稿内容\" title=\"実例 - 投稿内容\" \u002F>\u003C\u002Fp>\n\u003Ch4>\u003Cstrong>\u003Ccode>extra-translate-text.php\u003C\u002Fcode>の定義内容\u003C\u002Fstrong>\u003C\u002Fh4>\n\u003Cpre>\u003Ccode><?php\n$_domain = 'twentysixteen';\n$my_content = array(\n  __( 'Headline', $_domain ), \n  __( 'Text of the line to the paragraph', $_domain ), \n  __( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar neque sed magna malesuada, non imperdiet sapien facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non iaculis urna. Morbi rutrum urna at eros mattis, at maximus ante finibus. Pellentesque ut arcu justo. Quisque at mi eu erat consequat placerat vitae ut nunc.\\\\n\\\\nNulla placerat tortor eget pharetra dignissim. Etiam mollis justo luctus felis ullamcorper congue. Etiam sed maximus purus. Duis justo sapien, cursus non massa quis, hendrerit rhoncus nulla. Duis finibus scelerisque dui quis porttitor. Nam pretium enim ut lacinia blandit. Nulla pharetra porta lectus non accumsan. Nam lacinia lacus id dui accumsan, non vestibulum quam elementum. Etiam hendrerit velit mi, nec efficitur sem dapibus non. Praesent porttitor velit sed libero pulvinar, sed malesuada purus bibendum. Nulla dapibus quam elementum blandit venenatis. Nunc tincidunt odio in lacus semper dapibus. Praesent dui velit, hendrerit vitae magna auctor, lacinia eleifend turpis.', $_domain ) \n);\n\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch4>\u003Cstrong>翻訳ソースファイル（.poファイル）\u003C\u002Fstrong>\u003C\u002Fh4>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fquick-translate-poedit-example.png\" alt=\"実例 - 翻訳登録\" title=\"実例 - 翻訳登録\" \u002F>\u003C\u002Fp>\n\u003Ch4>\u003Cstrong>Webサイト側のページ表示\u003C\u002Fstrong>\u003C\u002Fh4>\n\u003Cdiv class=\"small center-block\">サイトの言語: 日本語\u003C\u002Fdiv>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fquick-translate-poedit-completed.png\" alt=\"実例 - 翻訳反映（日本語）\" title=\"実例 - 翻訳反映（日本語）\" \u002F>\u003C\u002Fp>\n\u003Cdiv class=\"small center-block\">サイトの言語: 英語\u003C\u002Fdiv>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fquick-translate-poedit-english.png\" alt=\"実例 - 翻訳反映（英語）\" title=\"実例 - 翻訳反映（英語）\" \u002F>\u003C\u002Fp>\n\u003Cp>\u003Cdiv class=\"clearfix\" style=\"margin-bottom: 2em;\">\u003C\u002Fdiv>\u003C\u002Fp>\n\u003Ch2>まとめ\u003C\u002Fh2>\n\u003Cp>最終的に期待通りの動きをしてくれて、なかなかいい感じだった…。\u003Cbr \u002F>\n元から多国語化を想定している投稿の本文はあらかじめ\u003Cstrong>[_e]～[\u002F_e]\u003C\u002Fstrong>で囲っておくと、翻訳の後付けがよりやりやすくなって良いかもしれない。\u003C\u002Fp>\n\u003Cp>ただ、本文のタイトルとかはテーマのテンプレート側で出力時に\u003Ccode>__( $post->post_title, $text_domain )\u003C\u002Fcode>の処理を追加してあげるか、もしくは下記のフィルターを追加する必要がある。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>function custom_quick_translate_title( $title ){\n  $text_domain = defined( 'TEXT_DOMAIN' ) ? TEXT_DOMAIN : 'twentysixteen';\n\n  return __( $title, $text_domain );\n}\nadd_filter( 'the_title', 'custom_quick_translate_title' );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>これで、投稿タイトルのテキストも翻訳候補になるので、\u003Ccode>extra-translate-text.php\u003C\u002Fcode>に翻訳リスト定義してあげればOKだ。\u003C\u002Fp>\n\u003Cp>このショートコードを使えば、投稿の一部だけとか、サイドバーだけとか、何気にフレキシブルに多国語化ができて便利かもしれない。\u003C\u002Fp>\n",[277,279,282],{"slug":74,"name":278},"WordPress",{"slug":280,"name":281},"%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%82%b3%e3%83%bc%e3%83%89","ショートコード",{"slug":283,"name":284},"%e5%a4%9a%e5%9b%bd%e8%aa%9e%e5%8c%96","多国語化",[286,295,304,312],{"slug":287,"title":288,"date":289,"excerpt":290,"image":291,"categories":292},"tips-of-the-case-that-are-not-translated-only-part-in-wordpress","WordPressで一部だけ多国語化されない場合の解決方法","2016-02-04T12:43:55","WordPressのプラグインやテーマを作っていて、最新に追加したテキスト部分のみ多国語化がされないという症状が発生してちょっとハマったので、解決方法を備忘録として残しておく。 はじめに確認しておくべき項目 まず、Wor…","\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fshutterstock_75513031_resized.jpg",[293,294],{"slug":74,"name":75},{"slug":45,"name":46},{"slug":296,"title":297,"date":298,"excerpt":299,"image":300,"categories":301},"no-plugin-how-to-set-category-order-by-using-description","プラグイン不要！ 説明欄を使ってカテゴリーの並び順を変える方法","2018-02-22T22:43:55","WordPressでカテゴリーの並び順を任意に変更したい場合、「Category Order and Taxonomy Terms Order」等のプラグインを導入するのが一般的だが、私のように管理画面に管理系のUIを…","\u002Fassets\u002Fuploads\u002F2018\u002F02\u002Fcategory_desciption_order_thumbnail.png",[302,303],{"slug":74,"name":75},{"slug":45,"name":46},{"slug":305,"title":306,"date":307,"excerpt":308,"image":42,"categories":309},"wordpress-emergency-tool","WordPressの管理画面にログインできなくなった時の緊急対処ツール","2017-06-17T00:13:27","WordPressのテーマとプラグインを開発していて、ログイン周りなどをカスタマイズしている時、ブラウザのセッションが切れて管理画面に入れなくなってしまう事などがまれにある。 私の例だと、WordPressの会員制サ…",[310,311],{"slug":74,"name":75},{"slug":45,"name":46},{"slug":313,"title":314,"date":315,"excerpt":316,"image":42,"categories":317},"retrieve-all-the-images-associated-from-any-post-at-wordpress","WordPressで任意の投稿から関連する画像をすべて取得する","2015-09-09T15:37:39","私がWordPressサイトを作る時によく使っている独自の処理に「特定の投稿に関連する画像をすべて取得する」という関数がある。指定した投稿に設定されているサムネイル（アイキャッチ）画像、添付ファイルとしての画像、直接記事…",[318,319],{"slug":74,"name":75},{"slug":45,"name":46},{"slug":287,"title":288,"date":289,"excerpt":290,"image":291,"categories":321},[322,323],{"slug":74,"name":75},{"slug":45,"name":46},{"slug":325,"title":326,"date":327,"excerpt":328,"image":329,"categories":330},"do-unit-test-of-wordpress-plugin-using-wp-cli-and-phpunit-in-xampp-environment","XAMPP環境でwp-cliとphpunitを使ってWordPressプラグインのテストを行う","2016-03-04T19:10:48","以前に書いた「XAMPP環境でphpunitをインストールしてユニットテストを実行する」の記事の続編である。 いやはや…最近、公開しているプラグインの機能が増えて来たこともあってか、ビルドバージョンのアップだけなのに、作…","\u002Fassets\u002Fuploads\u002F2016\u002F03\u002Fshutterstock_218803594_resized.jpg",[331],{"slug":74,"name":75},1793391397855]