STAFFBLOG スタッフブログ

WordPressとカスタムフィールド製造業

井上武明
2017/11/14
閲覧所要時間:約6

こんにちは、2017年になってオールドレンズに手を染めている井上です。

私が使っているニコンの一眼レフは「不変のFマウント」などと呼ばれ、1959年発売のNikon Fから同じレンズの基本規格(マウント)が使われ続けられ、半世紀以上前のレンズが最新のデジタル一眼レフでも使える楽しさがあります。

まぁ、いろいろと制約がありますが、自分より年上のレンズで撮る楽しさもありますが、安く楽しめると言うのが一番ですね。
写真は1959年に発売されたFマウント最初のレンズNIKKOR-S Auto 5cm F2と、そのおまけで購入したNikomat FTn(1967年発売)で遊ぶ4歳のわが娘。レンズはチョットだけ改造して普段使っているデジタルの一眼レフでも使えるようになってます。

という事で今回はオールドレンズの魅力をたっぷり紹介・・・思っていたらWordPressの気になる記事があったので今回はカスタムフィールド製造業について。

カスタムフィールド製造業?

ウェブ制作など、興味のあることについてネット上に出ている情報はつねに収集しているんですが、9月末にとても面白いと感じる記事がありました。


いったんまとめよう。カスタムフィールド製造業とは……

  • 顧客に対してWordPressサイトの制作を提供する仕事を意味する
  • プログラミングにはそれほど詳しくなく、ACFやCustom Post Type UIなどを駆使してWordPressをカスタマイズする人が該当する
  • デザイン、Javascript、コンテンツライティングなどの他の強みがあまりなく、器用貧乏っぽい人ほど、この言葉に敏感に反応する
  • 大きなプロジェクトに年単位で関わり数千万の予算をもらうのではなく、50万から300万ぐらいのプロジェクトを忙しくこなしている人が、この言葉に敏感に反応する
    といった概念である。

出典:カスタムフィールド製造業ならびにWebアセンブラーという職業について – Capital P


カスタムフィールド製造業、まさに自分のことじゃないか(笑)

なぜカスタムフィールド製造業が必要とされているのか

WordPressとはウェブサイトの更新を行うためのプログラムのCMS(Contents Management System)の一つで、CMSが使われているサイトの59.8%、ウェブサイト全体の29.0%でも何らかの形で利用されていると言われる超メジャーなCMSです。

そのため書店でもWordPress関連書籍は非常に多く、

「WordPressを使えば専門的な知識がなくても、プロなみのWebサイトを作れます」

みたいなキャッチコピーの本が沢山あるので簡単そうに感じますが、そこはやはり「本を売るため」のセールスコピーなので専門知識ゼロの方でもストレス無く簡単に作れますと言えるほどは簡単ではないです。(ちなみに似たようなキャッチコピーは昔から多くのウェブ制作サービスで使われてます。)

「最新スマホのカメラを使えば専門的な知識がなくても、プロなみの写真を撮れます」

と言われて買ったスマートフォンの中の写真データ、プロ並みとはちょっと言えない気がしませんか。

例えば雑誌の表紙などで使われる写真
これは購買層や誌面の内容に合わせて一流のカメラマンが「構図」「光の方向」「色味」「ピント」などを考えて、何度も工夫し、調整して撮影した中から最高の1枚が使われます。

例えば修学旅行などで撮る集合写真
この場合もカメラマンがいろいろと指示を出して失敗がないように準備をして素早く何枚か撮影しますが、渡されるのはやはりカメラマンが選んだ最高の1枚だと思います。

これはウェブの世界も同じです。

重要な内容のページやトップページ
これは利用者が求めるものとサイト運営者が提供したい内容に合わせて「デザイン」「機能」などを考えて、何度も工夫し、調整して作成した最高の1ページを用意します。

会社概要や商品・サービスのページ
住所や価格などある程度決まった形式が必要とされ、一定以上のクオリティを維持しつつも商品やサービスの変更に合わせて速やかに更新する必要が出てきます。

前者は頻繁に変わることは少ないですが、後者は情報のクオリティよりも正確性と鮮度が大切で、更新のたびにカメラマンに来てもらって撮影するのは時間と費用がもったいない気がしますよね。

最低限のクオリティで失敗しない撮り方をカメラマンに教えてもらって、必要なカメラやライトを買って自分で撮れるようになりたいと思うかもしれません。
せっかく撮った最新商品と人気商品なら、入口横で目立つショーウィンドウを用意して自分でならべたくなりますよね。

ついでに手書きポップも添えると読んでもらえるかな。
という感じに「誰でも撮れるような撮影セット」「入口横のショーウィンドウのスペース」がウェブでも必要とされます。
それがCMS(Contents Management System)の本質であり、「カメラのシャッターを押すだけ」「ケースの決められた位置に置くだけ」のレベルにまで簡単にしてあげるのがWordPressの「カスタムフィールド製造業」の本質だと思えます。

さらに言えば
「ショーケースの商品の値札は必ず見えるように並べ方のルールを決めましょう」
「売れ残らないように夕方になったら値引きシールを貼りましょう」
「プレゼント企画なら当選者のお届け先の住所とか聞かなくて大丈夫ですか」
などなど、忘れたら大変な事柄をウェブでもしっかりサポートすることも実際にはカスタムフィールド製造業の大切な仕事だと思います。

ただ言われたとおりに物を作るだけではダメってことですね。

管理画面が大きく変わる予定のWordPress5.0

さて、もうすぐWordPress4.9がリリースされる予定ですが、その次のWordPress5.0では長年使われている管理画面のテキストエディタがTinyMCE(タイニーエムシイイー)からGutenberg(グーテンベルク)という全く新しいものに変わる予定だと聞いています。


Gutenbergのテキストエディタはまだまだ開発中なんですが、テスト用のプラグインとして提供されているので誰でも試してみることが出来できます。(日本語化はまだまだ先ですね)

今までは難しかった表組みや画面の分割、各種機能の埋め込みなども使いやすくなるようなので期待していますが、ツールが使いやすくなったとしても「カメラのシャッターを押すだけ」の簡単さで失敗がなく作れる訳ではないので、簡単に更新できるようにサポートをするためのカスタムフィールド製造業的なものは無くならないと思いますが変化に対応する準備は大変です。

テキストエディタを見直す方針が示されたのが2016年12月、Gutenbergの名称とテスト用プラグインが出てきたのが2017年7月とWordPressはすごいスピードで進化しようとしています。
なので独りではついて行くのは大変。

こういうときにも協力してウェブ制作にあたれる仲間ってありがたいです。

※先日の社員旅行の台湾写真、せっかくなので何枚かを無理やり使いました。(^^;

実際のWordPresssサイトの作り方について

井上武明
2017/02/09
閲覧所要時間:約8

フロンティアビジョンに入社してもう1年の井上です。
入社に合わせてウェブ制作環境をWindowsからMacに切り替えたので、今回のブログでは会社から貸与してもらっているMacBookPro13の使い勝手をレポートしようかなっと思っていたんですが・・・電源が入らなくなる故障が発生しました。

メーカーに修理に出したのですが、「電源が入り、チェックでも異常なしだったので戻します」とそのまま帰ってきてしまいました。
大丈夫かなぁっと思っていたらやはり再発。
2回目は前回修理から90日以内という事でロジックボード交換を無償交換。

2回とも金曜日に修理に発送して翌月曜には戻ってくるというAppleのサポートには感動しましたが、やはり故障中は作業効率がガタ落ちしてMacBookPro13の使いやすさを再認識することになりました。

あたりまえですが機械にも健康と寿命があります。
機械もデータもバックアップはしっかりしましょう。

心の傷は置いておいて、実は先日「WordPressの投稿と固定ページの違いってなんだっけ」と話が出ていたので今回はWordPress関連のお話です。

WordPressとは

WordPressとはCMS(コンテンツマネジメントシステム)の一つで、ウェブサイト上に管理画面を用意してお知らせやブログなどのページの中身を追加・修正するプログラムのことです。

WordPressの利用率はもの凄く高く、W3Techsの調査データによると今日現在でCMSのシェアが58.6%、ウェブサイト全体でも27.5%で使われています。
2位以降のCMSと比較してその利用率の差は圧倒的な状況ですね。
img3
上記図の元データ w3techs
https://w3techs.com/technologies/overview/content_management/all


色々な更新機能をウェブサイトに持たせる事ができて人気のWordPressは、その基本概念として1つのページを「投稿」「固定ページ」に分けて考えられています。

WordPressの投稿と固定ページの違い

WordPressは元々ブログ用に作られたプログラムで、ページの概念を時系列に並べる必要が有るか無いかに分けています。
img2
単純に説明すると以下のような感じです。
  • 「投稿」 ・・・ ブログのようにページが時系列に列べられて管理され、カテゴリーやタグなどで同じものを列べて表示させるアーカイブが用意できるページ。
  • 「固定ページ」 ・・・ 会社概要やお問い合わせなど、時系列に並べる必要が無く、メニューの決められた位置に固定させるようなページ。

ちょっと複雑ですが、公開後も増やしていくページの場合は「投稿」内容の修正を行うだけの場合は「固定ページ」と考えると分かりやすいのかなと思います。

一般的なWordPressサイト

WordPressサイトのページデザインはテーマと言われるプログラムで管理されていています。
標準で用意されているいくつかのテーマの他に、下のように管理画面上からWordPress公式サイトに保存されている無数のテーマから自由にダウンロードして利用する事が可能になっています。
img4
書店などに並んでいるWordPress本は、この公式サイトにあるテーマを利用してウェブサイトを作るやり方の紹介がほとんどで、ちょっと高レベルの本では自分でテーマをつくる方法の紹介になっています。

しかし、企業などのウェブサイトになると企業イメージにあった高いデザイン性が求められます。
オリジナルデザインのウェブサイト全体をWordPressテーマとして用意するのは結構大変なんですが、実際にはページ内容の更新をすることがほとんど無い場合がよくあります。

他にも、お知らせの他にスタッフブログや商品紹介ページなど、目的・機能・デザインが違うタイプの更新が必要になる場合や、PDFファイルなどを定期的に増やしたいがダウンロードページは一つにまとめておきたいなど色々なケースが出てきます。

そういったウェブサイトごとの要求を満たしつつ、WordPressの管理画面はできるだけ分かりやすくシンプルする事も重要。

毎回WordPressをどう使うのがこのウェブサイトにはベストなのかを考え、出来るだけ効果的なWordPressの作り方で使い分けをしています。

お知らせなど一部だけWordPress

まず最も小さくWordPressを使う方法として、ウェブサイト全体は静的なHTMLファイルとして作成しますが、更新が必要なお知らせなどの部分だけをWordPressで用意し、トップページなどに数件の新着を表示する機能を追加する事があります。
img5
お知らせの更新に必要な機能だけに制限させるので、無料ブログサービスやSNSの更新と同じ程度に誰でも使えるようなシンプルな管理画面を用意することができ、オリジナルデザインでも最小限のコストで収めたい時などに有効かと思います。

お知らせなどに加えて事例や商品紹介などもWordPressで管理

ブログなどでは必要なカテゴリーのチェックを入れてもらうなどの対応で表示を分ける方法もありますが、この方法だと管理画面が複雑になってしまいます。

複数の商品写真や説明文などが必要で入力ミスを減らしつつ、できるだけ更新しやすくするために「カスタム投稿」「カスタム分類」「カスタムフィールド」などの追加機能を加える事があります。
img6
専用の更新機能を用意する場合、十分な打合せや検討を行った上で作り始めるのはもちろんなんですが、公開直前や公開後に写真サイズを制限が必要になったり、掲載順番の変更、予定していなかった項目の追加などの調整や変更が発生することはどうしてもあります。
その場合に必要な修正が速やかに加えられるような柔軟な作りも大切ですね。

全体をWordPressにしつつも普通のページを一部入れる

意外と知らない人もいるのですが、WordPressサイト内に静的なHTMLファイルがある場合は実際のHTMLファイルの方を優先して表示させます。

どうしてそうなるのかと言うと、ウェブサイトにアクセスがあった場合、そのURLに該当する場所のファイルにアクセスを試みます。しかし、該当のファイルがないと通常はエラートとして表示されるのですがWordPressではそこで内部データベースをチェックして用意されたHTMLファイルのデータを用意して表示してくれることになります。
img1
例えばWordPressをインストールすると直下にreadme.htmlというHTMLファイルがあります。
そんなことは通常しませんがWordPress管理画面の中でパーマリンク設定を調整してreadme.htmlと言う固定ページを作成しても実際にあるreadme.htmlが表示されることになると思います。
(このreadme.htmlはWordPress本体のアップデートと共に更新されるのでファイルを削除しても復活します。)

これを知っていると完全に別デザインのランディングページなどが必要なった場合などで、わざわざWordPressテーマファイルに手を加えなくても簡単にページを用意出来ます。
また、ランディングページが不要になった時はファイルを削除することでWordPressがページがない場合の処理を行ってくれるので安全に運用することが出来ます。

WordPressの中に複数のWordPressを入れる

通常はWordPressのカスタム投稿やテーマ設計でほとんどの事は対応できるのですが、WordPress管理画面を運用する上で分けたい場合や、ウェブサイト内に擬似的に別のウェブサイトを運用したいなどデザイン・機能的に大きく変わる場合があります。

単純にWordPressを複数インストールする方法もありますが、実は複数のWordPressプログラムをインストールしなくてもネットワークサイトまたはマルチサイト機能といわれる方法でWordPress内で擬似的に複数のWordPressを用意する方法もあります。

この場合、WordPressアップデートも一括管理でき、異なるWordPressのデータを表示させるやり方もあり便利ではありますが、運用中のWordPressを後からネットワークサイト化すると不具合を起こす可能性が高く、一部対応していないプラグインなども有るため十分な検証を行って用意する必要があります。

制作側から見たWordPressを使うメリット

そんな色々な使い方ができるWordPressですが、最大のメリットは必要な追加機能をプラグインとして比較的簡単に追加できること。そして必要な管理画面を用意する必要が無いことです。(使いやすく安全な管理画面を用意するのはかなり大変な作業なんですよ)

また、定期的なアップデートにしっかりと対応させることで安全に運用出来るようにすることも大切です。
そのためにアップデートで問題が発生しないような作り方をするように注意しています。

運用側から見たWordPressを使う際の注意点

パスワードの管理と必要なアップデートをしっかりと行えば、基本的にはWordPressは安全に運用できます。

ここ数日WordPress関係で多数の改ざん被害のニュースがあり、もしかすると「やはりWordPressはダメだね」と感じた人もいるかもしれません。
しかし、これは間違いで実際には他のCMSでも同じようなトラブルの可能性は必ずあります。

自動車でリコールがよくあるように不具合や問題が全くないモノを作るのは不可能です。
また、スマートフォンの普及など変化に応じた対応は絶対に必要になってきます。

今回の改ざん被害ケースの多くは将来に向けたWordpressの追加機能部分で問題があったのですが、改ざん被害が発生する以前からWordpressコミュティの一部メンバーとレンタルサーバー各社などが水面下で監視・準備を行ってくれていました。

WordPress4.7.2 セキュリティーリリースの裏で起こっていたお話
https://twitter.com/i/moments/826971421427445763


最後に

一般利用者の方が気にされる必要は本当はないのですが、Wordpressが無料でこれらを実現していることは凄いことです。

ウェブ制作をしていると正直Wordpressだけに依存しすぎるのも良くないなと考える時もありますが、今回のブログを書いていてWordPressの魅力はWordPressコミュニティ全体の力が非常に強力な事だと改めて感じました。

WordBench熊本に参加してます

井上武明
2016/09/27
閲覧所要時間:約3

どうも、今週のジャンプを読んでちょっぴり「こち亀ロス」な井上です。
ただ今、参加費500円を払ってWordBench熊本に参加してブログを書いてます。

作業中

WordBench熊本とはなんぞや?

WordBench(ワードベンチ)とは WordPressユーザーのための地域コミュニティの事で、WordPressでメールフォームを作るプラグインとして超有名なContact Form 7の制作者の三好さんが発起人となり、2008年9月に開催された WordCamp Tokyo 2008で発表されたそうです。(今調べました。)

その熊本県でのコミュニティがWordBench熊本です。

ちなみにもっと大規模なWordCamp(ワードキャンプ)というのもありまして、こちらはWordPressの普及と情報交換を目的に世界中で行われているユーザー・デザイナー・開発者が集う巨大イベントです。(これも今調べました。)
2016年は7月9日〜10日に大阪、9月17日〜18日に東京で開催されていて、その内容はWeb上に無料で掲載されています。

WordCamp Kansai 2016
https://2016.kansai.wordcamp.org/movie-and-slide/


WordCamp Tokyo 2016
https://2016.tokyo.wordcamp.org/09/24/slide/


・・・行きたかったな。わぷーグッズもいっぱいあったみたいだし。

わぷー

WordBenchって何か凄いWordPressユーザーが集まってそう。

いや、全然凄くないです。むしろWordPress始めたばかりの人が多く、HTML/CSS/PHPなどのWeb制作技術やWordPress関係の高度なカスタマイズ技術が習得できると期待して参加すると・・・多分がっかりしちゃいます。

それなら何故参加するかというと・・・はて、何でだろう。

単純に技術習得だけを目的にするのであれば、書籍やネット検索を使って勉強する方が効率的です。

実際の仕事ではその繰り返しで新しい知識や技術を習得してますが、多分それだけでは得られないものが有るんだと思います。

 

【本題】8月末にContact Form 7の使い方セミナーで講師しました。

講師と言っても講師代を頂けるわけでもなく、プライベート時間を利用して資料を作成し、他の方と同じく参加費を払って講師をしました。

WordBench熊本での発表は結構頻繁にやっておりまして、
「今回は初心者向け何かやろうか、よしスパムフィルタ付きのメールフォームの作り方なら良いかな」
っと企画。すると何故か最初の参加申込者がContact Form 7の制作者ご本人という衝撃の事態に!

さらに嫁から「長男の学童夏祭りと重なったから!」とダメ出しも加わってしまいました・・・っが!

勉強会の様子
写真のように何とか無事に講師を務められました。(^▽^)
(プライバシー保護のため写真は加工しております。)

センターポジションがContact Form 7制作者の三好さんご本人。
その後ろにいるピンクの子が「嫁との妥協案」として連れてきたアンパンマン鑑賞中な我が娘です。

超メジャーなソフトの使い方を本人の前で説明する機会ってあんまりないですよね。
・・・子連れでなければ懇親会にも参加したかったな。


WordPressが普及している理由は?

CMSのシェア
W3Techsの調査データによるとCMSのシェアが59.3%、Webサイト全体でも26.7%で使われていると言われるWordPressですが、その普及の最大の理由は「使いやすさ」「カスタマイズ性」「無料」ではなく 「コミュニティ」 に有ると感じます。

具体的には WordPress+やりたいこと で検索すると大体調べられると言うのはコミュニティの底力ですね。

スタッフブログを AMP 対応しました!

fujie
2016/08/30
閲覧所要時間:約6

amp-thumb ※画像のカルーセルスライダーはこんな感じになればいいな…というパロディイメージです。

AMP ( アンプ ) 対応になったスタッフブログからこんにちは。
アンプと読むらしいです。読み方は知っていてもエーエムピーと読む癖がついているので、いきなりアンプが~と言われてもまったく認識できませんでした。

対応方法や情報だけは前々から仕入れていましたが、個人的に盛り上がってない感やニュースサイトだけでいいのではと思っておりましたが、

スマホ対応が不要になる!? Google、通常のモバイル検索結果でスマホ向けページの代わりにAMPページを表示する実験を開始
https://www.suzukikenichi.com/blog/google-starts-experiment-to-replace-mobile-friendly-pages-with-amp-pages/

などを読むうちに急にやる気になり、重い腰をあげました。

WordPress を利用しているので、便利なプラグインにてささっと対応もできますが、( 現段階のプラグインだと、AMP の厳しい制限によりエラーがかなり多くなるようですが… ) より深く理解したかったので、オリジナルテンプレートで対応することにしました!

ということで実際作業した感想のレポートです。
※詳しい対応方法は解説記事を探すと大量に見つかるので省きます。

対応方法にて大変お世話になった参考サイト



URL はどうするか?

AMP 化の URL は自由に決めることができます。

使用できるタグや属性などが厳しく制限されているなか、URL は特に定まっていないのに衝撃を少し覚えました。

既に AMP 対応なされているメディアのブログ、個人のブログなどを参考に URL の末尾に ?amp を付与すると AMP 対応のテンプレートを見るように設定しました。

この記事の実際の AMP ページは下記のとおりです。
スタッフブログを AMP 対応にしました! ( AMP )
https://www.fvs-net.co.jp/blog/11607?amp




どういうデザインにするか?

制限されているタグや属性の中で表現できる範囲内に関しては、デザインは自由なので、こちらもすでに AMP 対応なされているところを参考にしました。

いくつか見ていくうちに共通点がありました。

  • スマホ対応にてよくつかわれるハンバーガメニュー ( ドロワー ) などは無し
  • 記事のみに集中 ( サイドバーなどは排除 )
  • 前後記事や似た記事などはあったりなかったり
  • オリジナルテンプレートで対応している場合は、レスポンシブウェブデザインとかなり近い形で表現が可能
以上のことを踏まえ、レスポンシブウェブデザインの時に書いた CSS をもとに、ハンバーガーメニューやサイドバーを排除したテンプレートを用意し、細かい調整を行いました。



HTMLタグを AMP 用に置き換えるときに苦労したこと

画像 ( img ) や フレーム ( iframe ) などは、それぞれ対応したタグに置き換えなければならないので、テンプレート上にて処理を記述します。
何度も繰り返しになりますが、タグの制限などが厳しいため、間違いがあると、デベロッパーモードにて、すぐにエラーが出てしまいます。
URL の末尾に #development=1 を付与するとエラーチェックができます。

WordPress なので、 PHP の正規表現を駆使していくことになりますが、
iframe というタグだけても
  • 普通の iframe を amp-iframe へ置き換え
  • WordPress の記事埋め込みカード機能の iframe も amp-iframe へ置き換え
  • YouTube の埋め込み iframe は amp-youtube へ置き換え
といろいろあり、正規表現が苦手なので、分岐に苦労させられました。

正規表現作るときはいつもこちらのリファレンスとにらめっこ…。
PHP: preg_match() / JavaScript: match() 正規表現チェッカー ver3.0
http://okumocchi.jp/php/re.php




最初のインデックスまでに1日!

AMP 対応ページは元の記事にメタタグにて指定を行うので、即時に公開できるのですが、サイトマップや Fetch as Google を行ったとしても、Search Console の Accelerated Mobile Pages にてインデックスされるまでに1日かかりました。



検索結果に雷マーク!

また、インデックスされたとしても、話題性がない普通のブログ記事は、トップニュースには載らないようです。
今日だったら台風とか天気に関することを書いて、アクセスが伸びれば載るのかな?という感じだと思います。

でもでも、ちゃんとインデックスされれば、下記のように検索結果に雷マークが付与されます。
名称未設定-1 いい感じ!

また余談ですが、スマホ対応のラベルは撤回されました。
( ラベルがなくなっただけでランキングシグナルからは外れてません )
こちらが参考になると思います。
「スマホ対応」ラベルをGoogleが廃止!?モバイル検索結果から削除される・・・
https://www.peko.co.jp/seo/smartphone/sumaho-corresponding-label-google-abolition



エラーへの対処とまとめ

弊社の今までのブログ記事は、648件です。

毎日20件前後 AMP 対応ページがインデックスされ、
その中で1・2件ほどエラーが上がってきている ( PHP の置き換え漏れ、カバーできない範囲 ) のが現状です。

とりあえずの AMP 化対応はプラグインを使えばすぐに終わり、オリジナルなら半日か1日で終わるけど、その後の対応でエラーへの対処を図っていく必要があり、さらに今後の記事への品質管理も考えなければ ( AMP を意識した記事の書き方のマニュアルの整備など )、検索エンジンに対してよい評価がもらえないと思うので、今回の AMP 対応を通して仕組みづくりが大切で、大変なことだと学ぶことができました。

また、取り掛かり前と後では正規表現に関する知識もより一層蓄えることができたので、総じてプラスになったと感じております。

以上です。



過去の対応 or 導入しましたの記事

WordPressで使えるギャラリー(Lightbox編)

shuhei
2015/08/31
閲覧所要時間:約2

さっきテスト用に一度公開したらFacebookに通知が行ってしまったようで失礼致しました。(2回出てきたらごめんなさい!)

にしてもまだこのネタ引っ張るの!?

ごめんね、これで最期にしますから(懇願

あと今回訳あって短めです。

メディア追加の罠

前回の記事ではギャラリーの見た目をカスタマイズしましたが、まだ少し気になる点がございました。

ギャラリーの画像をクリックすると、画像だけのページが表示されます。

なんか気持ち悪いですよね(え、そうでもない?そうですか・・・

実はこれギャラリーだけでなく、何も考えずに「メディアの挿入」とかで画像をぶち込んでも同じ様に勝手にリンクされてしまいます。

うちのブログでも知ってる人はちゃんとリンクを切ってるようですが、僕の昔の記事とか見るとめっちゃそのまんま貼ってますね(汗

ポイントはこちら

スクリーンショット 2015-08-31 16.08.33
画像やギャラリーを挿入する時に「リンク先」という項目がありますので、ここで「なし」を選択するとリンク無しの画像だけが表示されます。

その他「メディアファイル」だと画像だけのページ、「添付ファイルのページ」だと記事に画像が表示されただけのページ、「カスタムURL」だと好きなURLへのリンクへ飛ばすことができます。

しかし修正できるとは言え、一個一個の記事を直すのはめんどくさい。

せめて「メディアファイル」だけでも

解決したいと思います。

結論から言うと「Light Box」にしてしまうだけです。

手順は簡単。プラグインをインストール&有効化するだけです。

今回使用したプラグインはHUGE-IT LIGHTBOXというプラグインです。

こちらを導入した前回のギャラリーがこちら。



よりスタイリッシュになったような(気がします)

まとめ

LightBox系のプラグインはこれ以外にも探すとたくさん出てきます。

それぞれに表示の仕方やデザイン・動きなど異なってきますので、自分のサイトに合ったもの探してみてはいかがでしょうか?

WPのJetpackでFacebookと共有すると全文表示される!?

2015/06/25
閲覧所要時間:約1

こんにちはゾエです。
僕のブログでは「Jetpack」というWordpressのプラグインを導入しています。
これはブログの記事を書いたら「FacebookやTwitterなどのSNSと連携して自動で投稿してくれる便利な機能」なのですが、いつの頃からかFacebookへの投稿が記事の全文を投稿するようになってしまいました。というか、会社のブログも全文投稿されてるッッ!?


01

本来なら”記事のタイトル”を表示して投稿してくれるものですが、記事の全文が投稿されてしまうと長ったらしくて不快ですね。これでは「いいね!」や「シェア」もされにくくなってしまいます XP


この問題を解決する方法は?

Jetpackをやめて手動で投稿する

一番確実なのはこれだと思いますが、ブログを書く度に幾つものSNSへ手動で投稿するのは少し面倒ですね。


投稿する際に「詳細を編集」をクリックする

02

ブログ記事を公開する際に、「詳細を編集」をクリックして「カスタムメッセージ」が表示されている状態で公開すると正常に動作するようです。
あくまでも応急処置になりますが、お試しあれ〜。

WordPressで使えるギャラリー(カスタマイズ編)

shuhei
2015/05/25
閲覧所要時間:約3

あ…ありのまま 今 起こった事を話すぜ!

CA177_L 「おれは 前に更新したの4ヶ月も前じゃんと思ったら その前の更新も更に4ヶ月前だった」

な… 何を言っているのか わからねーと思うが

おれも 何をされたのか わからなかった…

前回のあらすじ

とまあどうでもいい前置きは水に流しましょう(目そらし

さてさて、前の記事でWordPressのギャラリー機能について簡単に紹介しましたが、ネタが思いつかなかったので引き続きお話を進めます。
前回作った下のようなギャラリーを作りましたが、これに手を加えてみましょう。


プラグインの追加と使用方法

さて、今回ご紹介するプラグインは「Jetpack by WordPress.com」になります。

Jetpack by WordPress.comとは

説明しよう。30種類以上の機能がこれ一つで利用できる高機能プラグインなのだ。
一部有料機能もあるが、多くの機能が無料で使えるぞ。
使いたい機能だけを有効化して使おう。
なおこれを利用するためにはwordpress.comへの登録(無料)が必要だ。
wordpress.comへの連携は、脱線しそうなので他のブログ様を参照してくれ。

こちらに準備しておいた連携済みjetpackが…

右メニューダッシュボードの下に「jetpack」の項目が追加されてますので、それを下にスクロールしていくと「jetpack機能」というのが見えてきます。
今回はその中から「タイルギャラリー」を有効化してみましょう。

スクリーンショット 2015-05-25 19.29.55

記事のページでギャラリーの更新

記事のギャラリーページに戻って、ギャラリーを編集します。
編集方法は前の記事のまとめ直前あたりに書いてあるよ!
種類はデフォルトで「サムネイルグリッド」と「スライドショー」が入っていましたが

スクリーンショット 2015-05-25 19.36.13
このようになんか増えてます。
これでお好きなタイプを選べば設定完了です。

以下、追加された種類のデモになります。

タイルモザイク

正方形タイル

丸型


まとめ

ちょっと小洒落たギャラリーをサクッと作りたい時はとても便利だと思います。
正方形や丸型だと写真の縦横比が変わってしまいますが、モザイクタイルだとある程度自動で合わせてくれるみたいです。

本当はもう少し掘り下げたものもあったけど長くなりそうなので。
決してネタを温存とか時間ないからとかそんなんでは…

WordPressで使えるギャラリー(導入編)

shuhei
2015/01/24
閲覧所要時間:約2

こんにちは、最近ジョギングを始めたにしむらです。
熊本城マラソンには出ません。フリじゃなくて無理です(迫真)

さて皆さん。WordPressで画像を投稿する時どのようにされていますか?
このブログでもそうですがだいたいは

CA088_L
こんな感じの1点張りじゃないでしょうか。

ただこれ画像が多くなると

CA076_LCA077_LCA086_LCA087_LCA085_LCA078_L
んぎゃわいい!!!うん、ちょっとバラバラで見づらいですね。

そこで今回ご紹介するのがWordPressにデフォルトで入っているギャラリー機能です。
WordPress2.5以降のバージョンなら入っているかと思います。

ギャラリーの作り方

まずは普通に画像を投稿するのと同じ様に、挿入したい位置でメディアを追加をクリックします。

スクリーンショット 2015-01-24 11.21.19
次にページ左上にある「ギャラリーを作成」をクリック。

スクリーンショット 2015-01-24 11.23.36
するとギャラリーに使う画像の選択画面になりますので、入れたい画像をクリックしてチェックを入れていきましょう。
画像を選んだらページ右下の「ギャラリーを作成」をクリック。

スクリーンショット 2015-01-24 11.27.30
ギャラリーの編集画面になりますので、並び順や設定を好きなように編集しましょう。

スクリーンショット 2015-01-24 13.33.30
最後に右下の「ギャラリーを挿入」をクリックすると・・・


こんな感じになります。(見やすい!
その他にもギャラリー編集画面でスライドショー形式を選択すると







こんな表示もできます。(なぜか上に改行取ってあげないと上部のテキストが埋もれてしまいました)
一度置いたギャラリーを編集する場合、テキストモードでタグを直接編集するか、ビジュアルモードでギャラリーをクリックして編集ボタン(鉛筆)をクリックして下さい。

スクリーンショット 2015-01-24 11.48.45

まとめ

この他にも細かい設定の追加や、プラグインを追加することで表示方法を変更したりなどカスタマイズの幅はまだまだあります。
今回は導入編ということで、カスタマイズについてはまた追々書いていく予定です。「予定」です。
標準機能だけでも便利なことに変わりないので、機会があればぜひ使ってみてはいかがでしょうか。

WordPressをマルチサイト化してみた(サブディレクトリ形式)

shuhei
2014/09/24
閲覧所要時間:約3

おはこんばんちは、にしむらです。

先日は思わぬ引きを見せてしまいましたが、手伝って頂いたスタッフの皆さん本当にありがとうございました。
おかげ様で戦績は見事にハズレオンリーです(哀)

さてさて、相も変わらずWordPressネタですがどうぞお付き合い下さいませ。
今回はマルチサイト化についてのお話です。

そもそもマルチサイト化って何?

簡単に言うと、「1つのWordPressで複数のブログを運用しよう」といったものです。
例えばこのブログは「fvs-net.co.jp/blog/」で運用していますが、同じWordPressの管理画面から「fvs-net.co.jp/blog/blog2」といった風にもう1つ別のブログを運用できるようになります。
図にするとこんな感じですかね。
multisite
プラグインやテーマの管理で逆に煩雑になる部分もありますが、そもそもそんなことやらないお客様にとっては管理画面が一つになり、操作し易くなるのではないかと思います。

WPのインストールは省略して

設定ファイルwp-config.phpに以下の一文を追加しましょう。

define('WP_ALLOW_MULTISITE', true);


これをアップし、管理画面のツールを開くと「ネットワークの設置」が追加されているのでそれをクリック!
あとはマルチサイトの形式(今回はサブディレクトリ)、ネットワークのタイトル(お好きな名前でどうぞ)、管理者用メールアドレスを入力し、「インストール」をクリック!

すると、「ネットワーク」を有効化中となり、wp-config.phpと.htaccessにこの内容を追記して下さいと指示が出てきます。
私は上で追加した一文に加えてこんな感じで記載しております。

/** 追加設定 */
define ('WP_ALLOW_MULTISITE', true);

define('MULTISITE', true);
define('SUBDOMAIN_INSTALL', false);
define('DOMAIN_CURRENT_SITE', 'fvs-net.co.jp');
define('PATH_CURRENT_SITE', '/blog/');
define('SITE_ID_CURRENT_SITE', 1);
define('BLOG_ID_CURRENT_SITE', 1);


.htaccessにも記述を追加したら一度ログアウトしましょう。

サイトの追加

再ログイン後、左上のプルダウンに「サイトネットワーク管理者」の項目が追加されています。
こちらの「サイト」をクリックすると、現在作っているサイトの一覧が表示されます。
ページ上部の「新規作成」からサイトの「アドレス」「サイト名」「管理者メールアドレス」を入力し、「サイトの追加」をクリックすると新しいサイトの完成です!

最後に

マルチサイト化についてですが、前述した通りデメリットになる部分もちらほらあります。
やってみると案外すんなりといった印象でしたが、wp-configや.htaccessをいじるとなると若干ハードルが高いかもしれません。
なんでもかんでもマルチサイト化すればいいってものではありませんが、「ここは使ったほうがいいんじゃないかな?」と思う場面で参考にして頂ければ幸いです。

ブログの記事にソーシャルボタンを付けたいんだけど

shuhei
2014/08/28
閲覧所要時間:約3

おはこんばんちは、にしむらです。

今年の夏は日照時間が少ないそうですが、暑いもんは暑いですよね。
どうせ暑いんだったら晴れてくれよ洗濯物干しにくいだろ!とか最近よく思ってます。

お盆は何してたかって?(聞いてない)
そんなことより大型アプデだ!(ゲマ並感)


閑話休題


弊社のトップページから直接記事に飛んでもらった人はお気付きかもしれませんが、現在記事の上下にソーシャルボタン達がずらっと並んでいるかと思います。
(一覧で見てる人は記事のタイトルをクリックしてみてくださいね)

今回はWordPressに簡単にこのソーシャルボタン達を入れてくれるプラグイン「WP Social Bookmarking Light」を、導入する際に起こった事をおりまぜながらご紹介したいと思います。

プラグインのインストール

管理画面のプラグイン新規追加で「WP Social Bookmarking Light」と検索するか、下記のページでDLしてアップしましょう。

WP Social Bookmarking Light

有効化してみると、あら簡単ソーシャルボタン達が
スクリーンショット(2014-08-27-16.13.16)
なんか残念な事になっていました。

問題解決:Facebookが表示されてない編

左メニュー設定の「WP Social Bookmarking Light」から管理メニューを開くと下図のような画面が表示されます。
一般設定については図を参照
スクリーンショット(2014-08-27-16.04.01)
追加したソーシャルボタンによって上部タブメニューが追加されますが、表示されないFB likeの設定をどんだけいじっても変化がありません。なんでや。

スクリーンショット(2014-08-27 18.02.53)
原因はFB likeではなくFBの方でした。
Versionを当たり障りのなさそうなiframeにした所無事に表示されました。

問題解決:css編

WP Social Bookmarking LightのcssはStyleのタブで管理されています。
デフォルトの状態でも十分使えると思いますが、カスタマイズしたい方は自力で頑張りましょう。

スクリーンショット(2014-08-27 18.18.10)
で、実際なんでこんな縦並びになっちゃってるかというと、要するにここのcssが読み込まれてないだけですね(白目
弊社のブログではオリジナルテーマを使っているので、おそらくこのプラグインに必要な記述が抜け落ちてしまっているのではないかと思われます。
まぁ読み込まれてないのなら読み込ませればいい。
というわけでこちらのcssをまるっとコピーしてテーマファイルのどこかに置いてしまいましょう。
置いたらそのcssを読み込むようにテーマに追記するだけですね!(荒っぽい)
と、そんなこんなで無事cssの方も解決しました。

まとめ

昨今のSNS普及率には目を見張るものがありますね。
特に若者世代では知り合いのほとんどが何かしらのSNSをやっているといった状況ではないでしょうか。
web業界ですとさらにその比率は高いのではないかと思われます。
こんなニッチな内容のブログでも、SNSで超有名人がイイねとかしてくれたらそれだけでアクセスがグンと伸びるような世の中です。(してもらえるとは言ってない)
ちょっとの手間でそんな機会ができるかもしれないソーシャルボタン。
まだ試して無い方は是非チャレンジしてみてはいかがでしょうか。

フロンティアビジョンのFacebook

デンタルWEB

求人情報

スタッフ紹介