ブログで使えるテーブル(table)のHTMLコード例

in TCD on 2022-04-25

テーブルブロックでは実現が難しい表現を可能にする工夫:

  • 1行目を見出しにする:theadとcolspanを使用。
  • 横幅を調整:widthで列ごとに横幅を指定.
  • 背景色を設定:background-colorで指定。
  • 文字を中央寄せ:WordPressのエディタからも可能。CSSのtext-align:center; で中央寄せに。
  • 枠線を太くする:WordPressのエディタでも変更可能。border-bottom、border-top、border-right、border-leftで指定。
  • セルを横に統合:colspanでセルを結合。
  • セルを縦に統合:rowspanでセルを結合。
  • 横スクロール:overflow: auto;は、子要素がはみ出した場合にスクロールさせる記述。white-space: nowrap;は、テキストを自動的に改行させないための記述。
  • 英単語の自動改行を解除:word-break: break-all;を入れておくと、英単語が自動改行されない。

テーブルは記事を読みやすくするアイテム

  • テーブルの本質は、情報の整理にある。
  • テーブルは情報を視覚的に整理できるので、それだけで文章が読みやすくなる。
  • 読みやすい記事は、ユーザーからの評価も高くなるため、結果として検索エンジン対策にもつながる。
  • テーブルを上手に活用することは、ブログ運営ではとても重要。

WordPressのページや投稿に簡単にJavaScriptを追加する方法 3種(英文)

https://www.wpbeginner.com/wp-tutorials/how-to-easily-add-javascript-in-wordpress-pages-or-posts/

“How to Easily Add JavaScript in WordPress Pages or Posts (3 Methods)” in wpberinner on 2021-09-28

ウェブサイト全体、または特定のページや投稿に JavaScript のコードを追加する方法を紹介。

  1. Insert Headers and Footersプラグインを使用してWordPressサイト全体にJavaScriptを追加する:テーマの更新や変更時にスクリプトが削除されない。サイトの全ページに同一のスクリプトを設置できる。
  2. WordPressにJavaScriptのコードを手動で追加する コードを使用する:特定のページでだけスクリプトを動作させるには、条件付きのスクリプトにする(ソースの例は元記事にあり)。
  3. プラグインを使用してWordPressの投稿やページ内にJavascriptコードを追加する:プラグインCode Embedを使って、カスタムフィールドにJavaScriptを追加し、任意の場所にコードを書き込める。

WordPressでコンバージョンにつながるセールスページを作成する方法(英文)

https://www.wpbeginner.com/wp-tutorials/how-to-create-a-sales-page-in-wordpress-that-converts/

“How to Create a Sales Page in WordPress (That Converts)” in wpbeginner on 2022-04-20

良い販売ページは、より多くのウェブサイト訪問者を有料顧客に変換するための鍵であり、したがって、あなたの利益を高めることができます。

方法

  1. SeedProdを使ってWordPressで販売ページを作成する(推奨)
  2. ブロックエディタを使用してWordPressのセールスページを作成する

1. SeedProdを使ってWordPressで販売ページを作成する

  • 販売促進のための多くの一般的なサードパーティツールと連携可。
  • リードスクイーズや近日発売のキャンペーンなど、様々なタイプのキャンペーン用にプロフェッショナルにデザインされた150のテンプレートを用意。
  • ブロックは、すべてのSeedProdレイアウトの中核となるコンポーネント。見出し、ボタン、画像などの既成のブロックをレイアウトに追加するだけで、販売ページ全体を構築可。
  • スペーサー、コラム、ディバイダーなどのSeedProdブロックを使用して、販売ページの整理と構成を実現。
  • SeedProdブロックのカスタマイズは容易。ブロックをクリックするだけで、ツールバーにそのブロックのすべての設定を表示。
  • 例えば、お客様の声、価格表、星の評価、カウントダウンブロックなど、コンバージョン率の高い販売ページを構築するのに最適なブロックを多数用意。
  • ブロックをドラッグ&ドロップすることで、レイアウトの中でブロックを移動可。
  • Hero、Call To Action、Features、FAQなどのセクションは、行とブロックのテンプレート。販売ページを素早く作成するのに役立つ。
  • 便利なAdd To Cartブロックや、トップレート商品やベストセラー商品を紹介できるブロックなど、WooCommerceのブロックも多数提供。WooCommerceの商品、サービス、イベントなどを宣伝する販売ページを簡単に作成可。また、SeedProdを選択することで、WooCommerceのテーマに制限されることなく、販売ページをデザイン可。

2. ブロックエディタを使用してWordPressのセールスページを作成する

  • 予算が限られていて、これから始めようと思っているのであれば、WordPressのブロックエディタだけで販売ページを作成することは可能。
  • 柔軟で使いやすいWordPressテーマが必須。多目的の無料テーマ「Astra」が最適。
  • カバーブロックは、販売ページのトップページに最適なブロック。
  • テキストと画像の両方をきれいにレイアウトして表示できるMedia & Textブロックは、片側に画像、もう片側にテキストを配置した2カラムのレイアウトを作成。
  • 販売ページでは、通常、支払いを受け入れる方法が必要。WP Simple Payを使って支払いボタンを作成可。あるいは、WPFormsを使用して注文フォームを作成し、販売ページにそれを埋め込む。

セールスページのレベルアップ

さらに売上を伸ばすのに役立つWordPressプラグインをご紹介:

  • All in One SEO (AIOSEO):この初心者に優しい検索エンジン最適化ツールキットは、検索エンジンからあなたの販売ページに多くの人を誘導するのに役立つ。
  • MonsterInsights:ページの統計情報を監視する最も簡単な方法は、この最高のWordPress解析プラグインを使用すること。
  • OptinMonster(有料):あなたの販売ページを閲覧している訪問者のマウスの動きを追跡し、訪問者が離脱しようとする正確な瞬間をプラグインが検知し、パーソナライズされたキャンペーンで訪問者をプロンプトする。
  • TrustPulse(有料):市場で最高のWordPressソーシャルプルーフプラグイン。ユーザーがあなたの販売ページで行っている活動をリアルタイムで通知表示することで、FOMO効果を利用。また、ページのコンバージョン率を監視し、改善することができるビルトイン分析が付属。

【WordPress Plugin】シンプルで使いやすい!Insert Headers and Footersのインストールと使い方

テーマファイルを修正せずにタグやフッターに指定コードを記述したいという時があるかと思います。
そんな時便利なプラグインが無料で利用できるInsert Headers and Footersプラグインです。

特長

  • <head>タグ内に記述が可能:<?php wp_head(); ?>が記述されている部分に、CSSやスクリプト、METAタグ、Google アドセンスの広告コードなど差し込む。
  • </body>タグの直前に記述が可能:<?php get_footer(); ?>が記述されている部分に、後読み込み推薦されているJavaScriptや解析タグを差し込む。

メリットとデメリット

メリット

  • 無料で利用できる
  • クレジット表記が無い
  • テーマのソースコードを修正せずに独自のCSSやJavaScriptを追加したい
  • アクセス解析を入れたい
  • タグ内に追加できるシンプルなプラグインを探している
  • タグ内(最下部)に追加できるシンプルなプラグインを探している

デメリット

  • PHPタグが使えない
  • 閉じタグ漏れなどのエラーチェックがない

魅力的なアプリストアのWordPressテーマ15選 (英文)

15 Attractive App Store WordPress Themes

in WP Solver on 06-25

たとえ有望なアプリを開発したとしても、それを適切に宣伝し、人気を獲得する必要があり、アプリの機能を紹介する格好のウェブサイトが必要。見逃せない15のアプリストアのWordPressテーマを紹介(※すべて有料)

  1. Appbox:4つのカラースキームとレスポンシブデザインを備え、モバイルアプリのランディングページとして利用可。
  2. Applay:モバイルモックアッププラグイン、ドラッグ&ドロップページビルダー、無制限のカラーを備えたWordPress用のアプリショーケースとApp Storeテーマ。レスポンシブおよびRetina対応。
  3. NextApp:レスポンシブおよびRetina対応のクリーンでエレガントなアプリ用ランディングページのテーマ。価格設定、レビュー、ダウンロードなどの豪華なページテンプレートを用意。Bootstrap 4で構築。
  4. xPider:商品やサービスを宣伝するための14以上のランディングページのバリエーションが付属。Elementor Builderで構築。10以上の内部ページと30以上のカスタムElementorウィジェット。
  5. Softwer:Elementorを使用したソフトウェア、モバイルアプリ開発用テンプレート。50以上の追加ウィジェットが付属。
  6. Swape:ビジュアルページビルダーとレスポンシブレイアウトを採用した、アプリストア用ランディングページ。WooCommerceに対応。10個のカスタムウィジェット、RTLオプション、多数の有料アドオンを含む。
  7. Xavi:King ComposerとReduxのフレームワークを搭載したアプリ用ランディングページのテーマです。10種類のヘッダースタイルと10種類以上のフッタースタイルを備える。Font Awesomeアイコンが付属。
  8. Rocket:WordPressでモバイルアプリのランディングページを作成するためのテーマ。Jet Elementsプラグインを同梱。ヘッダー、フッター、ブログなど様々なレイアウトが可能。
  9. Foton:50以上のカスタムショートコードを備えたソフトウェアランディングページ。WPBakeryページビルダーとElementorに対応。
  10. vApp(※現在では利用不能)
  11. Appark:ドラッグ&ドロップでカスタマイズできるKing Composerページビルダーによるランディングページ用テーマ。スムーズなページ遷移効果と3000以上のフォントアイコンが付属。
  12. Appset:プロジェクトやアプリを宣伝するために必要なすべてを含む。ダウンロード、ブログ、規約、FAQページなど、豪華な内部ページを用意。12種類のレイアウトスタイルが用意されているので、すぐに使い始められる。
  13. AppOne:すべてのデジタル製品に使えるアプリストア用ランディングページのテーマです。レスポンシブ対応。WPBakeryページビルダーで簡単にカスタマイズ可。14種のホームページのレイアウトおよび有料プラグイン群を含む。
  14. Daylight:2つのホームページレイアウトとドラッグ&ドロップのページビルダーを含む多目的ビジネステーマ。ソーシャルメディアやアイコンウィジェット、価格表、Google Fonts、パララックススクロールが付属。(※サイトは元記事掲載のURLではなく、premiumwp.comのページが適切と思われる)
  15. XooApp:10以上のクールなデモを持つ美しいアプリストア用テーマ。Bootstrap 4.0で構築。Elementor用の20以上のカスタムブロックを含む。速度のために最適化。

WordPressはコードツールかノーコードツールか?(英文)

https://www.freecodecamp.org/news/is-wordpress-a-code-or-no-code-tool/

in freecodecamp on 2022-03-23(拙訳ゴメン)

WordPressはコードツールかノーコードツールか?

  • コードが分からなくても、Elementorのようなドラッグ&ドロップ式のページビルダーを使えば、WordPressでウェブサイトを作ることは可能。
  • プラグインで機能を追加し、スピードのためにウェブサイトを最適化し、それをバックアップできる。
  • Elementorの無料版でも多くのことができるが、より高い効果を得たいのであれば、少なくとも一番安いバージョンを購入して練習すべき。
  • WordPressのWebサイトについてよくある懸念は、読み込みが遅いということ。(高速化についての記事→”Does Elementor slow down your site?“)
  • 同様のページビルダーにDiviとBeaverがある。
  • eコマース、フォーラム、コンタクトフォームなどの機能はプラグインを使って追加する。eコマース機能を追加するためのWooCommerce、コンタクトフォームのためのWP Forms、ジョブボードを作成するためのWP Job Manager、学習プラットフォームの機能を追加するためのLearn Dashなどがある。
  • さまざまなテーマで見せ方をコントロール。

WordPressがコードツールである理由

  • カスタム機能を追加したり、プラグインやテーマですでに実現されていることをさらに発展させたりする場合は、コーディングが必要。
  • 例えばWordPressのテーマを作る場合、最低でもindex.phpとstyles.cssの2つのファイルを作成する必要があるため、HTML、CSS、PHPに精通している必要がある。

WordPressのウェブサイトにカスタムCSSを追加する方法

  • テーマにカスタムCSSを追加することは、コードツールとしてWordPressが得意とする分野。

ブログの記事にHTMLコードを追加する方法

  • WordPressは、間違いなく、コードとノーコードの両方のツールに優れている。
  • WordPressだけでウェブサイトを作りたいのであれば、コードを書けなくても、WordPressのノーコード部分で多くのことを成し遂げることができる。
  • WordPressのプラグインやテーマを作成したり、複雑な問題のトラブルシューティングを行ったりするには、HTML、CSS、JavaScript、PHPのコーディングができる必要。