先日Glatchのポートフォリオサイトをリニューアルしました。 前回の記事では妻がポートフォリオの設計・デザインプロセスに関して投稿してくれました。 今回は実装編です。 普段は技術系の記事はテックブログに書いているのですが、ポートフォリオの宣伝も兼ねているので今回はこちらに投稿します。良かったらテックブログも見ていただけると嬉しいです。 さて技術面に関してはせっかくリニューアルするのでこの機会に新しい技術を試したい、でもWordPressで管理してきた資産はできればそのまま活かしたい、という2つの要望が自分の中にありました。 この2つを両立させるためにコンテンツ管理には引き続きWordPressを使用し、フロント部分にモダンなフレームワークを採用することで要望を満たしました。 検討の結果WP REST API + Nuxt.jsというJAMstackな構成で構築することにしました。 本記事

ソースファイル https://github.com/h1romas4/wp-vuejs-sample オープンソースカンファレンス 2017 北海道「WordPress REST API と Vue.js を使ったフロントエンド開発」セミナースライド

管理画面が壊れた？ 2016年10月16日、突然管理画面がアイキャッチのような表示になってしまいました。 数日前も確認してたのですが、特に問題なかったので16日の前後に何かやらかしたのかと少し焦りました。原因を確認 ・管理画面の表示が崩れていたものの、クリックなどでページ移動することはできる ・Webページの方は表示に影響はない（クライアントのサイトもあるので不幸中の幸いでした） ・他のkagoyaで使ってるwordpressのサイトも同様に管理画面の表示のみ崩れていた。解決・対処方法 結論から言うと、ルートディレクトリの.htaccessに php_value output_handler noneと記述すると直りました。 この場所に記述するのが正しいのかは知識不足なので不明ですが、私のhtaccessの記述例は下記のようにしています。 こちらのサイトを参考にしました。http://ka

WordPressで、通常の投稿やアーカイブページなどのURLは、ダッシュボードのパーマリンク設定ページで設定できます。 しかし、カスタム投稿タイプのURLに関しては、ダッシュボードでの設定はできませんし、思ったようなURL構成にするのが難しいです。 ここでは記事: カスタム投稿タイプの設定を踏まえながら、カスタム投稿タイプのパーマリンクを思い通りにカスタマイズする方法をまとめました。 まず、URLを投稿名ベースにするか、数字ベースにするか？ 最初に押さえておくポイントは、ダッシュボードのパーマリンク設定をデフォルト以外にした場合、カスタム投稿タイプのパーマリンクは常に投稿名（スラッグ）がベースになるという点です。 例えば、パーマリンク設定を数字ベースに設定します。 この設定で、カスタム投稿タイプの記事を作成してみますが、パーマリンクは数字ベースにはなりません。 パーマリンクが投稿名ベース

やっと、off-canvas と dropdown の切り替えができるCSSだけで実装したレスポンシブナビゲーションメニューが完成した。 もちろん、全部自分だけで作れる技量もなく、世界中を旅しながら(ネットだけど)CSSテンプレート探しまわり、そのテンプレートに合う html を吐き出すようにしました。 wordpressのテーマとして作っているので、wp_nav_menu()で普通に出力しても、求めている htmlコード にはならず、困った困ったと、フックをかけて何とかしてやろうと、処理方法を探しまわったところ「カスタムウォーカー機能」という、高いレベルで htmlコード をカスタマイズ出来ることが分かりました。 使い方はくせがあるように思いますが、結果的にはそうでもなかったので、メモとして残しておきます。 まず、呼び出し方 wp_nav_menu( array( 'theme_loca

Advanced Custom Fields（ACF）のアドオン・繰り返しフィールドの解説 アドオン「繰り返しフィールド」で出来ること 「Advanced Custom Fields」は、WordPressのカスタムフィールドを利用する時に非常に便利なプラグインですが、その Advanced Custom Fieldsにはさらに便利になる有料アドオンも用意されています。 その中から今回は「繰り返しフィールド」について解説を行います。 アドオンの「繰り返しフィールド」は、その名の通り、投稿画面で入力フィールドを任意に追加していけるフィールドです。 英語表記では「Repeat Field」なのですが、「繰り返しフィールド」より「リピートフィールド」のままの方がよかったような感じも．．． 利用方法としては、 例えば、飲食店の情報サイトを作成しているとします。 投稿する情報にはメニューの項目があり

WordPressの「これが困った！」 WordPressで困っていることはありませんか？ サーバー移転／エラー解消／カスタマイズなど、WordPressの「これが困った」を解決します。 WordPressの便利屋 著者情報：この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談＞サービスメニュー】 💬 𝕏（twitter）はよくフリーランスの人たちにフォローされてるようです。 Follow @websae2012 WordPressを新しいサーバーへ移したい？ WordPressを引っ越しする方法は以下の2種類あります。 1. プラグインを使い「自動で」サーバー移行 2. プラグインなしで「手動で」サーバー移行 今回お伝えするのは、

プラグインのインストール 下記のボタンからサイトにアクセスして、プラグインをダウンロードできます。 MTS Simple Bookin C 初期設定 プラグインを有効化すると、管理画面に「予約システム」という項目が追加されます。その中にある「各種設定」にアクセスしてください。順番に紹介する各種設定をそれぞれ完了した後は、必ず「変更を保存」をクリックしてください。クリックせずに、次のタブに進むと設定が保存されません。 予約パラメータ内の設定 予約の受付のチェックボックスにチェックを入れます。チェックを入れることで、予約受付中になり、外すと予約の受付ができなくなります。受付を行っていないときに表示するメッセージは任意に設定可能です。基本的にそれ以外の設定は変更不要ですので、「変更を保存」をクリックし次へ進みます。 施設情報の設定 施設の名称や、住所、連絡先などの基本情報を入力します。予約された

公開2013.11.18 更新2017.12.03 仕事・技術 今日は前回の記事の続きでWordPressのカスタム投稿タイプごとに生成するアイキャッチ画像、投稿サムネイルなどに使用できる画像サイズを分けて生成する方法です。 例として以下のような画像サイズ定義をadd_image_size()を使ってfunctions.php内で行っていたとします。 //カスタム投稿タイプ「book」用 add_image_size('book', 300, 300 ); //カスタム投稿タイプ「video」用 add_image_size('video', 400, 400 ); //カスタム投稿タイプ「game」用 add_image_size('game', 500, 500 ); book、video、gameというカスタム投稿タイプがあると仮定し、上記で定義した名称とカスタム投稿タイプ名が一致す

WordPressでHTMLが含まれる可能性のある文字列をechoなどで表示する際にはエスケープする必要があります。完全なる無知ですが、WordPressでエスケープする場合はすべて esc_html をつければよいと思っていました…。 先日読んだKindle書籍(Amazon.co.jp： WordPress3.5対応 テーマカスタマイズのためのPHP)のなかで、エスケープする関数は esc_html だけではないという事を知ったので違いや使い方等を調べてみました。 WordPressで使えるエスケープする関数は以下のページで確認できます。 沢山ありますがつかう事がありそうな関数は esc_html と esc_attr 、esc_urlの3つです。 3つの関数の意味・使い方 esc_html と esc_attr は違いがよくわかりませんでしたが、こちらの記事「【WordPressで文

This domain may be for sale!

今回課せられた制約は大きく2つ ・/blog　ディレクトリにインストールしたWordPressの新着記事をリスト表示させて、さらにjQueryで1行おきに背景色をつけてしましまにする ・さらに、そのなかでも最も新しい投稿には”New!!”と表示させてアピりたい 完成イメージはこんな感じ。 この2つの条件にかなり泣かされました。 しましまリストの実装はjQuery使って、こんな感じに書けば一瞬で出来ますね。 でも、これだと最初からHTMLに記述してあった部分はOKだけど、動的に書き出したfeed部分には適用できない。 JavaScriptを使って出力した部分を、さらにjQueryで操作する方法っていうのが私には分からなかったんです。 さらに”New!!”表示をどうやってやるかっていうことでまた悩み。。。 サイト全体がWordPressなら、投稿タグかカスタムフィールドつけてもらってそれを取っ

初カキコ…ども… 俺みたいに何でもかんでもプラグインで解決しようって腐れ野郎、他に、いますかっていねーか、はは 。 と有名なコピペをあれしつつ、今回はWordPressの便利すぎて後ろめたい気持ちにすらなりそうなプラグインBEST5をご紹介します。 第1位　Favicon Rotator ファビコンって作るの何気にめんどくさくないですか？フォトショを拡張してないとicoファイル作れないし。JPGやPNGデータをファビコン形式に変換してくれるサイトを使ってicoファイルを作り、WordPressのメディアにアップロードし、ヘッダに組み込む。あぁ、めんどくさい！ ところがこのFavicon Rotatorってプラグインを使うと、JPGやPNGの画像をアップロードするだけであっというまに出来上がるんです！ﾏｼﾞﾊﾟﾈｴ プラグインをインストールすると、外観の中にFaviconというメニューが現れ

This domain may be for sale!

みなさん、こんにちは。マスク・ド・レガシーです。 PHPカンファレンスも無事に終わり、ゆっくりと休暇を楽しんでいたところ、にわかにタイムラインが騒がしくなっていました。今回は話題の中心になったSpikaを題材にPHPのコーディングについて考えてみようと思います。 Spikaの概要SpikaはMITライセンス化のオープンソースとして公開されたメッセンジャーアプリケーションです。プロジェクトにはネイティブで実装されたiOS、Android向けのモバイルアプリケーションとPHPで実装されたサーバーサイドを組み合わせる事で独自のメッセンジャーサービスを構築する事ができます。 メディアの記事ではバックエンドはCouchDBとの事でしたが、プッシュ通知を管理する為のキューと管理画面にMySQLも利用されています。インストーラーによると動作条件は下記の通りです。 PHP 5.0 or higherMyS

さきほどWordPressフォーラム見てましたら、ぞっとするようなトピが立ちました。 サイト改ざん？ http://ja.forums.wordpress.org/topic/24503 サイトが急に文字化けになり、困っております；； Hacked by Krad Xinと黒の上部ツールバーにあり、サイトが改ざんされてしまったのでしょうか？ ハッカーの声明リストを見ると、日本のサーバで乗っ取った宣言のがずらり これはほんの一部です。おそらく数千、数万の被害が。 ※追記　DN乗っ取りでなければ数百〜千単位で済むかもしれないですが・・ただ攻撃は28日深夜から29日朝にかけても続き、被害は増大しています。 8/29　11時のリリースだと4802件だそうです。 くれぐれもリストにあるところは見に行かないように・・・感染してしまう可能性があります!! でもってドメインを検索して見ると、ほとんどがロリ

Posted: 2011.08.18 / Category: WordPress / Tag: テンプレートカスタマイズ, 管理画面 カテゴリーごとに独自の画像やテキストを表示させたい場合、テンプレートで条件分岐を使用すれば簡単ですが、それだとカテゴリーが増える度にテンプレートを編集しなくてはいけないので不便ですね。 ここではカテゴリー編集画面にカスタムフィールドを追加して、管理画面で画像や新たなテキストを追加できるようにしてみます。 カテゴリー編集に項目を追加 さっそくですがカテゴリー編集画面に項目を追加してみましょう。 現在使用している「functions.php」に以下を追加します。 functions.php add_action ( 'edit_category_form_fields', 'extra_category_fields'); function extra_cate

ご連絡頂いて、良さ気だったので ご紹介。以前記事にした、テキスト の両端を揃えるタイポグラフィ系 のスクリプト・slabTextを日本語 でも利用出来るようにし、且つWP で利用出来るようにしてくれました。 今年の1月くらいにご紹介したslabTextをWPで、且つ日本語で利用出来る、というプラグインです。slabTextに関しては以前の記事をご参照下さい。 テキストのサイズを自動調整して幅一杯に広げるレスポンシブWebデザイン対応のjQueryプラグイン・SLABTEXT 過去記事でも書いたように、普通に使っても日本語環境で使うのは若干微妙でした。（単語単位で半角スペースを入れる必要があった）これをうまく解消してくれているので需要も結構あるのでは無いかなと思います。 もともと目をつけていたスクリプトだったので日本語環境で利用出来るようになったのはとても嬉しいです。スクリプトの開発者さんは