カテゴリーアーカイブ - ワードプレス

2022年3月5日2022年3月6日

ワードプレスの投稿IDを書き替えるには

ワードプレスでサイト制作していると、たまに、既に公開済みの投稿の投稿ID（post_id）を変更したい場合があります。

単純に投稿の投稿IDを取得する場合はワードプレスにて関数が用意されており簡単ですが、既に発行された投稿IDを書き替えるのは簡単ではありません。

この場合は、データベースに保存された値をphpmyadminで書き替える必要があります。

phpmyadminは一般的なレンタルサーバーの管理画面で起動が可能です。ここではネットオウルのスターサーバーを例にして説明します。

まずは、スターサーバー管理画面に入り、「データベース設定」⇒「phpmyadmin」タブをクリックします。

ログイン画面が立ち上がりますので、ワードプレスで使用しているデータベースのユーザー名とパスワードを入力します。ネットオウル以外のレンタルサーバーでもphpmyadminを起動時には同様にデータベースユーザー名およびデータベースパスワードが必要な筈です。

データベースのユーザー名とパスワードが不明な場合は、下記の方法で調べれます。

ワードプレスがインストールされているディレクトリ内にあるwp-config.phpを開きます。

wp-config.phpを開くと、私の場合、32行目、35行目にデータベースのユーザー名とパスワードの記載があります。

これをメモして先のログインフォームに入力しログインします。下記のようなphpmyadmin画面が開きます。

左側ツリーで該当するデータベース名をクリックし、ドロップダウンリストを開く。さらにドロップダウンリストの中から「wp_posts」をクリック。右側にデータベースに保存されている投稿のデータベース内容の一覧が表示される。

IDを書き替えたい投稿の行の「編集」をクリック。データベース編集画面が開きますので、ID番号を全て書き替え保存して完了です。

2022年3月3日2022年4月17日

TCD FAKE(TCD074) カスタマイズ事例 – ヘッダー動画をレスポンシブに

当オフィスではTCDのFAKE（TCD074）の特別ライセンスを取得しておりますが、たまに、このFAKE（TCD074）テーマについてのカスタマイズのお問い合わせが入ることがあります。

そして最近実際にあったお問い合わせなのですが、

「トップヘッダーに動画を使っているが、スマートフォンでの閲覧時にヘッダー動画の一部分しか表示されない。PCとスマホ、それぞれで別の動画を表示できないか」

とのご要望でした。

確かに、FAKE（TCD074）のヘッダーには画像スライダーだけではなく動画を設定できるんですが、動画は一つしか設定できないので、パソコンでの閲覧を想定した横長の動画で、かつ、動画が左右に動きのあるものだと、スマホで閲覧した際に動画の一部しか表示されず、肝心な部分が伝わらない等の問題が確かにあります。

この問題に対応するには、PCおよびスマホのどちらで閲覧してもそれなりに表示されるような構成で、フレームサイズもPCとスマホのどちらにもフィットするようなアスペクト比の動画を用意するしかないのですが、これにも限界があります。

そして一番良いのは、PC用とスマホ用それぞれのバージョンの動画を用意する事。

実際にヘッダー部分に動画を用いているサイトで、PCとスマホで動画を出し分けているサイトがあります。それが下のスキンケア商品のショッピングサイトであります「ピカイチ」さんのサイトです。

ピカイチ公式ショッピングサイト | さぁ、しあわせなお肌になろう。 (pikaichi.co.jp)

このサイトにアクセスするとまず飛び込むのがCM調の動画です。そして、このサイトではパソコンで見てもスマホで見ても動画は最適に表示されています。理由は、アクセスユーザーの端末に応じて（PCかスマホか）2種類の動画を出し分けているから。

なぜ知っているのかというと、以前、合同会社アシスト様という会社様から、「自社が取り扱う商品の紹介サイトを作成して欲しい。商品動画はあるのでヘッダーに動画を用いたい」とのご依頼があり、イメージ参考サイトとして頂いたのが上記「ピカイチ」様サイトでした。

この際に調べて分かったのは、ピカイチ様のサイトのヘッダー動画はPC用（1920×1080）とスマホ用（1080×1920）の2種類があって、メディアクエリ768pxをブレークポイントとして動画を出し分けているという事でした。

特にCM調の動画とかだと左右に動きがありますし、やはり、そのような場合は動画は2種類用意して出し分けて表示するレスポンシブ仕様としたいところですよね。

話が長くなりましたが、今回のお問い合わせを頂いた際に、FAKE（TCD074）テーマのヘッダー部分に独自カスタマイズを加え、PC用とスマホ用の動画を出し分けれるように改修を加えてみました。以下、そのデモサイトです。

FAKE(TCD074)動画ヘッダーレスポンシブ化デモサイト

このデモサイトでは次の2種類の動画を使っています。

そして実際にデモサイトにアクセスしていただき、ブラウザの幅を縮めたり、または、PCと合わせてスマホでも閲覧いただくと分かるのですが、それぞれの動画が出し分け表示されるのが分かる筈です（このデモサイトのブレークポイントは768pxで設定しています）。

実際のデモサイトはこちら⇒FAKE(TCD074)動画ヘッダーレスポンシブ化デモサイト

FAKEはコンテンツビルダーに動画アップローダーが搭載されていますが、登録できるのは一つだけ。今回のカスタマイズにおきましては、スマホ用動画はPC用動画のファイル名末尾に「-sp」を付加してワードプレスの管理画面「メディア」にて別途アップロードする方法としております。

例えば、PC用動画のファイル名が「test.mp4」の場合、スマホ用のファイル名は「test-sp.mp4」として頂き、スマホ用動画はメディアアップローダーでアップしておくだけです。それだけで上記動画のレスポンシブが実現できます。

以上、TCD FAKE（TCD074）テーマのカスタマイズ事例のご紹介となります。

ご興味のある企業様ございましたら是非お問い合わせください。お待ちいたしております。

今回ご紹介するカスタマイズ事例は、TCD FAKEテーマのテンプレートファイルにコード追記等の改修を加える手法となりますので、子テーマ化が必要となる手法となります。
TCDテーマを使ったサイト制作やカスタマイズを承る場合、当オフィスにおきましては、基本料金としまして、68,400円（税込）を頂いております。
今回ご紹介するカスタマイズ事例の料金は基本料金のみの68,400円（税込）となります。
従いましてTCDテーマのカスタマイズのご依頼の際には、サイト制作からご依頼頂く、または、その他カスタマイズも併せてご依頼頂くのがお得です。
TCDテーマのサイト制作およびカスタマイズにつきましては、既にTCDテーマを購入済の方のみ承っております。

2022年1月1日2022年1月2日

簡単！ブログ用AMP対応テーマの作り方 – ワードプレス

今回、当オフィスのブログをAMP化するにあたっては、まず、ワードプレスを使用しております。

ただ、規則が厳格なAMPサイトにおいては、各種ライブラリやスタイルシートを読み込むワードプレスとの相性が悪く、ワードプレスにおけるAMP化は、AMPプラグインやAMP対応テーマを使うしかありません。

しかし、先のとおり私のAMPサイトはワードプレスサイトですがAMPプラグインやAMP対応テーマは使用しておりません。テーマから自作でありまして、かつ、一応AMP対応のテーマとなります。

ご覧の通り、いたって簡潔なテーマとなっております。テンプレートもindex.php、single.php、archive.phpの3つのみ。

index.phpの役割は、ブログ記事を新着順でメディアカードとして表示するテンプレート。

single.phpの役割は個別記事の表示用、archive.phpの役割はカテゴリーや月別の記事一覧表示用です。

実は、AMPプラグインやAMP対応テーマを使わなくとも、今回作成した簡単なブログ程度のものでありましたら、簡単にAMPテーマが作れます。

その理由、

AMPではJavascriptは使えませんが、PHPタグの埋め込みが可能。
AMPテンプレートは命名規則が緩やかで、拡張子も自由につけることができる。

つまり、AMPのルールに則ったヘッダーとフッターのみのテンプレートを作成し、ファイル名をindex.phpとして保存、コンテンツ部分にはthe_title()タグやthe_content()タグ、ワードプレスサブルーチン等を記述できるので、AMPテンプレートがワードプレステンプレートに早変わりなのです。

ただ、気を付けなければならないのは、AMPテンプレートは厳格なルールに基づいていなければならない点。余計なものを読み込ませるわけにはいきません。

ですので、基本的に今回のAMP化テンプレートは、ほぼAMPテンプレートそのままでありまして、ワードプレステーマとしての記述としては、記事タイトルや記事本文、アイキャッチ画像の各種出力タグの使用やWPルーチンの記述程度に留めております。wp_head()などの余計なファイルの読み込みにつながるような関数は一切使っておりません。

あと気を付けないといけないのはブロックエディターですね。ブロックエディタで作成した投稿ページは、単純な「段落」や「見出し」、「画像」を張っただけ程度のものでしたら問題はありませんが、AMPテンプレートでは外部スタイルシートを読み込むことができませんので、ワードプレスデフォルトのブロック用スタイルが読み込めません。なので、複雑にブロックを組み合わて作成したような投稿ページだと表示が崩れますし、それどころかほとんどのブロックは使えません。

また、画像ブロックで挿入した画像も、なるべく小さなサイズを指定しておかないと、AMPテンプレートのビューポートを突き破ってしまいます（AMPテンプレートタグだとresponsive指定ができるんですけどね）。

上記のような問題はありますが、とりあえず、見出しと文章、幅300px程度の小さな画像を並べた簡単な投稿ページであれば今回解説したAMP化方法で問題はありません。

ちなみに今回作成したAMP対応WPテーマのベースは、AMP公式サイトにある「The Scenic」というフリーのAMPテンプレートを使用しました。

「The Scenic」の紹介ページはこちら

以上、是非お試しください。

2021年9月27日2022年4月17日

横浜にあるフラ教室（オハナ・フラ・エ・マルラニ様）のウェブサイトを制作納品いたしました

今回のご依頼主は、横浜市内のフラ教室様でオハナ・フラ・エ・マルラニ（’Ohana Hula E Malulani）様です。

元よりホームページはお持ちでありましたが、これまでは手作業での更新であったため、今後は更新が容易な形になさりたいのと、コロナの影響による客離れを機に、未経験者および初心者にターゲットを絞った集客用ウェブサイトにしたいとのご要望でした。

使用したテーマはランディングページ向けテーマであります「LIQUID LP」。これに集客用バナーの出し分けが可能な「LIQUID CONNECT」プラグインも導入し、内部SEO対策まで施したうえで納品させて頂きました。

内部SEO対策が功を奏し、「フラ教室　横浜　未経験者向け」等といったスモールキーワードにおきまして、現時点における順位ではありますが、＼グーグル検索結果1位／を達成できております！

この結果が実際にコンバージョンに繋がれば幸いです。

〇オハナ・フラ・エ・マルラニ（’Ohana Hula E Malulani）様

http://hulamalulani.com

2021年9月7日2022年4月17日

都内建設会社様（株式会社和弓建設様）のウェブサイトを制作納品いたしました

今回のご依頼主は、都内でリフォーム業を営む建設会社様で株式会社和弓建設様です。

デザインからAdobeXDにて当オフィスが担当し、ウェブサイトはワードプレスにて構築致しました。

使用したテーマは「LIQUID CORPORATE」。当オフィスによる独自カスタマイズを加えたウェブサイトになります。

〇株式会社和弓建設ウェブサイト
http://www.wayumi.jp

2021年8月8日2022年4月17日

都内企業様（合同会社アシスト様）の商品紹介ウェブサイトを制作、納品させて頂きました

今回の発注者様は、都内で「AI SELPHY STAND」を中心とするガジェット系製品の製造、開発、輸出入を営む合同会社アシスト様です。

クラウドファンディングをこれから実施するにあたり、商品紹介のランディングページと会社情報ページが欲しいとのご依頼でありました。

また、コラムやお客様の声等の投稿機能も欲しいとのご要望もありました。

動的コンテンツがある事から、今回納品したウェブサイトはワードプレスにて構築。

使用したテーマは「LIQUID LP」。当オフィスによる独自カスタマイズを加えたウェブサイトになります。

若干納期が遅れてしまい大変ご迷惑をおかけしてしまいましたが、何とか納品にこぎつけました

それにしても合同会社アシスト様が今回発売される予定の「AI SLEFY STAND」ですがなかなか面白い製品ですよ！

人工知能搭載で自撮り動画が撮れる製品で、キャッチコピーは「自分専属カメラマン」、「自動顔認識であなたをどこまでも追いかける」。

SNSに動画投稿したい方にピッタリの製品となります。

興味ある方は是非、合同会社アシスト様にお問い合わせを！

※納品サイトで使用されている商品画像や動画は合同会社アシスト様より支給頂いたものとなります。

インテリジェンス自動追跡ロボット「AI SELFY」

トップページ（PC）

製品紹介ページ（PC）

トップページ（SP）

製品紹介ページ（SP）

2021年7月16日2022年4月17日

夏と言えば海、海と言えば水着！スイムウェア商品のランディングページを納品致しました。

とあるクライアント様よりスイムウェア商品のランディングページ制作を賜りました。

この案件は商品画像素材や文章、ワードプレスインストールまでクライアントにて準備されていて、また、クライアント側にこだわった要望もない案件であり、テーマデフォルト仕様での制作納品であった為、比較的簡単な案件でした。

使用したテーマは「LIQUID LP」。

このテーマは、「サービス」、「プロダクト」、「リード」といった3種類のテンプレートが付属しており、ランディングページを制作するうえで便利なクラスライブラリを内蔵。また、各種ブロックも搭載しており、ランディングページを簡単に制作できる工夫が施されております。

イメージ的にも海にピッタリ！？

クライアント側の準備のおかげもありますが、単納期を可能にしてくれました。

当オフィスではランディングページ制作も随時承っております。

お問い合わせお待ち致しております。

2021年4月28日2022年4月17日

ワードプレスサイトの修正およびSEO(検索エンジン最適化)改善業務を納品致しました – 那覇市の岡部公認会計士税理士事務所様

4月10日に業務の依頼を請け、作業を進めていた案件が27日に納品の運びとなりました。

お客様は沖縄県那覇市に事務所を構える岡部公認会計士・税理士事務所様です。

トップページ

元々、ご依頼を承った時点では税理士登録前であられまして、近々税理士登録されるにあたり、既存ウェブサイトの記載内容とロゴ画像の修正をお願いしたいというものでした。

また、ウェブサイトを立ち上げてから3か月が経過するが、検索結果に反映されないのが気になるというもの。

ウェブサイトの修正は、26日に税理士登録番号の取得を待ち、最後に税理士登録番号を加えて作業完了。

担当した作業内容はこちら。

業務内容に追加したコンテンツ「料金表」は、PCでの閲覧する場合と、モバイルで閲覧する場合とで表示UIの出し分けを行っております。

問題はSEO(検索エンジン最適化)改善の方でした。

当初、岡部様のウェブサイトをチェックした時に気づいたのが、ブログの投稿数がとても多い事。

私のウェブサイトも検索エンジン最適化対策として、ブログ投稿をしており、その記事数約40記事ほど。

岡部様はそれを優に越える投稿数なんです。

聞けば、ご自身のウェブサイトの検索順位を上げるべく、熱心にブログを投稿しておられるとの由。

しかし、次にチェックしたのはインデックス状況なのですが、何故かたったの4ページしかインデックスされていないという状況でした。

しかも、内3ページは404エラー(ページが存在しない)。

検索結果に全く表示されないのが当たり前の状態でした。

普通はこれだけ熱心にブログを書き綴り、投稿し続けていれば、もっとインデックスされていなければならないもの。

まずは、404エラーの原因を探るべく調査の結果、ワードプレスサイトでたまにあるパーマリンク異常が原因でした。

パーマリンクエラーが生じるに至った原因は、定かではないものの、MW WPフォームのパーマリンク変更機能とワードプレスのパーマリンク設定の干渉では？と思われるもの。

この異常を修正し、翌日くらいからようやくブログ記事のインデックスも進み始め、数日前からはスモールキーワードを用いた場合ではあるものの検索結果において比較的上位に表示され始めるに至り、改善されました。

最後に、SEO対策として、

・検索エンジンの検索順位決定の仕組みを良く知るべきである事

・SEO(検索エンジン最適化)における施策には内部対策と外部対策がある旨

・ブログ等の施策は内部対策にあたる旨

・内部対策だけではなく、外部対策も重要である旨

・外部対策として被リンク(バックリンク)の重要性

等を伝授させて頂きました。

当オフィスでは、ウェブサイトを一から制作するばかりではなく、ワードプレスサイトでたまにあるエラーの修正やウェブサイトの改修等の小さなお困り事からご相談を承っております。

また、基本的なSEO対策についても伝授致しますので、お気軽にお問い合わせ頂きますよう、よろしくお願い致します。

こちらもお読み下さい

スモール事業者がブログで検索順位を上げる方法 – ニッチなキーワードを狙いましょう

SNSとの連携 – OGP(Open Graph Protocol)を設定しよう

SEO(検索エンジン最適化) – ブログ投稿による効果

ウェブを使った集客の仕方 – 地域密着型の不動産仲介業を例に SEO分析-

2021年2月8日2021年12月31日

WooCommerceでECサイトの構築 – おすすめテーマ「Lightning｣

別のブログでも書きましたが、WooCommerceプラグインは海外製プラグインであるという点のみを除けば、誰もが簡単にECサイトの構築が可能なプラグインであるという点に間違いはありません。

ただし、ワードプレステーマとの相性があります。

相性の良いテーマを選定すれば、誰もが簡単にECサイトの立ち上げが可能なプラグインです。

そして、最も相性の良いプラグインは、ワードプレス公式テーマ(twenty twenty-oneやtwenty seventeen等)です。

これは、WooCommerceプラグイン側で、ワードプレス公式テーマに対してサポートしているからです。

相性の悪いテーマを選ぶと適切に表示されなかったり、動作しない等もあり得ます。

しかし、ワードプレス公式テーマがWooCommerceでECサイトを構築するにおいて最適なテーマかと言うと、そうでもありません。

何故なら、ワードプレス公式テーマは、ブロックやウィジェット等、ワードプレスであらかじめ用意された機能の範囲内でしかデザイン構築ができないからです。

つまり、機能が弱いと言う事です。

そこでおすすめなのが、Vektor社の「Lightning｣テーマです。

まず、Vektor社の「Lightning｣テーマは、WooCommerceプラグインとの相性が良く、「Lightning｣テーマ側でWooCommerceプラグインが出力するデータの最適化が為されています。

そして、おすすめな理由として、Vektor社ホームページでも唄われておりますが、拡張性が抜群なんです。

テーマ自体はシンプルな構成ですが、機能は同時開発の多機能プラグイン(VK All in one Expansion Unit)で強力に拡張が可能なんです。

かつ、「Lightning｣テーマは有料版の「Lightning Pro｣もありますが、無料版の「Lightning｣テーマのままでも、前記拡張プラグインを使えます。勿論、拡張プラグイン自体、無料です。

ExUnitプラグインでは、「PR Block」「画像つき新着記事リスト」「プロフィール」「ボタン」「固定ページ本文」「CTA」「連絡先情報」等、ネットショップを立ち上げるのに便利なウィジェットが多数用意されており、「Lightning｣テーマと併せて利用する事によって、コーポレートサイトやお店のホームページ、ブログなど簡単に構築する事ができます。

現在、WooCommerceプラグインでECサイト(ネットショップ)の立ち上げを検討されているのであれば、是非、使ってみてはいかがでしょうか。

Lightning

Lightning無料版のダウンロードサイト

Lightning Proの紹介サイト

2021年2月8日2021年2月16日

100%GPLで商用利用可能、モバイルファーストなワードプレステーマ「LIQUID PRESS(リキッドプレス)｣のご紹介

企業サイトやオウンドメディア、ブログサイト、LPサイト等を構築できるワードプレステーマはたくさんありますが、その中でも今回は、LIQUID PRESS（リキッドプレス）をご紹介いたします。

LIQUID PRESS（リキッドプレス）テーマの特徴

WordPress公式有料サポートテーマであり、レスポンシブ対応のワードプレステーマとなります。

現在リリースされているテーマは全8種類ほどあり、メディア構築向け、企業サイト構築用、LPサイト構築用等、用途別のテーマが用意されています。

〇メディア構築用テーマ

・LIQUID MAGAZINE
・LIQUID INSIGHT
・LIQUID SMART
・LIQUID PORTFOLIO
等

LIQUID MAGAZINE

LIQUID INSIGHT

LIQUID SMART

LIQUID PORTFOLIO

〇企業サイト向けテーマ

・LIQUID CORPORATE

LIQUID CORPORATE

〇LPサイト向けテーマ

・LIQUID LP

LIQUID LP

〇WordPress公式有料サポートテーマである。

リキッドプレステーマは、一部無料テーマもありますが、基本的に有料となります。価格帯としては4千円～1万円程度でありまして手頃な価格帯であります。

有料ではありますが、購入後30日間は個別プライベートにメールでのサポート（テーマの設定方法等）を受けることが可能でして、ご自分でウェブサイトを構築することが可能なテーマとなります。

※ただし、カスタマイズ等はテーマサポートの対象外です。

〇100％GPL、商用利用OK

リキッドプレス社の公式ホームページのFAQを読みますと

「全てのテーマおよびプラグインはWordPress本体と同じGPLライセンスを採用しています。
商用利用、改変、再配布が可能です。※著作権を放棄するものではありません。」

とあります。また、

「全てのテーマおよびプラグインで商用利用が可能です。
・テーマを利用したサイトで商品を販売する
・テーマを利用したサイトで広告やアフィリエイト収入を得る
・テーマを企業のコーポレートサイトとして利用する
・テーマを利用して制作したサイトをクライアントに納品する」

従いまして、制作業者としてリキッドプレステーマを使用して納品も可能ですし、テーマをカスタマイズしての納品もOK。1ライセンス（1度購入すれば）で複数サイトにインストールも可能です。

〇Bootstrap4対応

私はリキッドプレステーマのデザインを変更（カスタマイズ）して制作納品の経験がありますが、Bootstrapのグリッドレイアウト手法がとられております。

独自クラスではなく良く知られたフレームワークが採用されていますので、Bootstrapの知識があれば、デザインの改修が容易であります。

〇ソーシャルメディアとの連携に対応している

OGP対応のテーマです。管理画面にてOGP機能のON/OFFが可能でして、OGP機能を「ON」にしますと、メタ情報にFacebookやTwitter向けのメタ情報が出力される仕組みとなっております。

これにより、FacebookやTwitter等のSNSにシェアされた際に、SNS向けの情報が表示されますのでシェアされやすいテーマと言えます。

SNSにシェアされやすいのでSEO的にも有利なテーマとなります。

〇他社にはない独自機能「レスポンシブプラス」

一般的なレスポンシブデザインではスマートフォンでパソコン用サイトを表示することはできませんが、リキッドプレスのテーマは、ユーザーが任意にスマホ/PC表示の切り替えができます。

※ただし、レスポンシブ+PC表示切替プラグイン「LIQUID RWD PLUS」のインストールが必要となります。このプラグインはリキッドプレステーマにおいてのみ機能します。

○モバイルファーストに対応している

最近のインターネットユーザーは、パソコンよりもスマートフォンやタブレット等のモバイル端末を使って検索する方が多くなってきています。

そしてGoogleは、MFI（モバイルファーストインデックス）を発表しており、今後はデスクトップではなくモバイルページの評価が検索順位に反映されるらしいのです。

リキッドプレスのテーマはこれを見据え、マルチデバイスに最適化できる機能を備えております。

それが、「ウィジェットのスマホ/PC出し分け｣と「ウィジェットのカラム設定｣機能です。

全てのウィジェットで、デバイスによる出し分けが可能であり、各ウィジェット毎に、デバイス表示設定を行い、スマートフォンとPCで異なるウィジェットを表示することができるんです。

例えば、パソコンでは表示するが、モバイル端末時は非表示にする等。逆のパターンもOKです。

また、全てのウィジェットで、カラム設定が任意で可能です。

各ウィジェット毎に、1から4カラムまでのカラム設定が可能。また、スマホとPCでカラム数を変えるなどの設定を簡単に行うことができます。

パソコンでは4カラム表示とし、モバイル時は2カラム等の設定が可能です。

これからのモバイルファースト時代に対応したウェブサイトを構築するうえで、リキッドプレスのワードプレステーマはマルチデバイスへの最適化が可能であり、有用なワードプレステーマの一つと言えます。

BLOG

カテゴリー: ワードプレス