add_shortcode関数を使用する ショートコード作成する場合はWordPressの「add_shortcode」を使用します。 以下が、このページで解説するショートコードを作成する関数です。 functions.phpに記述します。 function page_list_short_cord ($arg) { ob_start(); global $post; ?> <?php $parent_id = get_the_ID(); $args = array( 'posts_per_page' => -1, 'post_type' => 'page', 'orderby' => 'menu_order', 'order' => 'ASC', 'post_parent' => $parent_id, ); $common_pages = new WP_Query( $args );

ブログ記事の拡散はX（Twitter）やFacebookなどのSNSに連携することが大切です。 そうすればSNSの一定数のフォロワーへ情報を届けることができます。 WordPressのプラグインにはSNSの自動投稿を可能にするものがあります。 私は「NextScripts: Social Networks Auto-Poster」というプラグインを使っていました。 しかし、このプラグインの設定は、だんだん難しくなったので、今では使っていません。 このページでは「Jetpack」プラグインを使ってFacebookに自動投稿を行ってみます。 実は、現在では「Jetpack」も使用せず、ブログの共有ボタンを押しています。 地道に一つずつ共有するのが確実です。 しかし、せっかく自動的に共有される機能があるので、やってみましょう。 【PR】「Theme3」では、企業サイトのWordPressベーステ

現在はサイト型CMSと言えるWordPressですが、古くはブログ機能がメインでした。 そのため、投稿機能はドメイン直下のURLとなります。 カテゴリーで、そのページをグループ分けすることも可能ですが、同じコンテンツグループの中にあるのは好ましくないものもあります。 そうした場合、カスタム投稿機能を使います。 カスタム投稿は投稿ページと固定ページの中間のようなページです。 独自の投稿グループを作ることができます。 例えばポートフォリオ、製品、イベント情報等、同じグループにコンテンツが複数存在するものがあげられます。 では、カスタム投稿はどのように作るのでしょうか？ このページでは、functions.phpを設定する方法をメインに紹介します。 数多くのブログでも紹介されている内容ですが、当ページでは特にブロックエディターに対応するための設定やラベル設定も実例で紹介しますので、そのままコピー

私は長い間HTML+CSSコーディングを「Coda 2」と「Espresso5」に頼ってきたのですが、両方とも2022年で終了してしまいました。 「Coda 2」の後継はサブスク型の「nova」というアプリがあります。 「Espresso5」にいたっては、どうなってしまったのか。サイトも見当たりません。 GUIでCSSが入力出来たりCSSの変化に対応したライブプレビューが確認できる面白いアプリだっただけに残念です。 どちらも「Flexbox」の「gap」がプレビューできなくなって、そろそろアップデートが欲しいと思っていたので、切り替え時だったのです。 という状況で「Visual Studio Code」に切り替えることにしました。 「Visual Studio Code」はすでにコーダーとしてデファクト・スタンダードになっているアプリケーションです。 機能拡張のためのプラグインが用意されて

WEBのトップページに動画を埋めこんであるサイトをよく見かけます。 しかし、くっきりとした美しい動画を埋めこんであるサイトは少なく、ざらざらとしたオーバーレイをかぶせてあるものが多いです。 YouTube動画を配置すれば比較的美しい動画になるのですが、どうしても直接動画を配置したい場合もあるでしょう。 その場合は配置する動画をどこまで軽量化できるかが、肝になります。 動画の軽量化は10MB以下と言われていたり、5MB以下といわれていたり、さまざまです。 実際に配置したサイト制作の経験からすると10MB以下ではないかと思いますが、50MBを超える動画でも違和感なく動作したサイトもあります。 また、10MB以下でも途中で止まってしまう場合もあります。 動画の内容によるということです。 しかし、見た目さえひどくならなければ、動画の容量は少ないにこしたことはありません。 このページでは無料ツールの

私の仕事はウェブマーケティングに対応したWEBサイトを制作することです。 お客さまのヒアリングから置かれた環境を分析、ベストと思える企画を提案し、現実にWEBサイトに反映していきます。 この仕事はウェブマーケティングの実践に他なりません。 しかし、いままでウェブマーケティングを体系的に学習したことはありません。 経験と実践で多くの実績を積み重ねただけです。 一つくらいは資格というものを取得しておいても、いいかなと思い、このほどウェブ解析士資格を取得しました。 ウェブ解析士 はウェブマーケティング・デジタルマーケティングの基礎を体系的に学ぶことができる資格です。 本気で学習すれば、ウェブマーケティングのさまざまなことを学ぶことができます。 このページでは、ウェブ解析士の資格取得を目指す方の参考になるように、資格取得のためのテキスト・問題集の準備や効率的な学習方法を紹介したいと思います。 【P

WordPressは「functions.php」にコードを追加するだけで、テーマに様々な機能を追加することができます。 あらゆることが可能なので、全部を網羅することは無理ですが、私が使って便利だった「ちょっとしたコード」を紹介します。 【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。 「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非！ 「Arkhe」の詳細を見る 「Arkhe Pro Pack」（サブスク版）を購入する 「Arkhe Pro Pack」には以下が含まれています。「Arkhe Blocks Pro」と「Arkhe Toolkit」には買い切り版もあります。 ・Arkhe

私が最初にブログをつくったテーマは「Stinger5」でした。 とても、シンプルなテーマで、デザインも気にいっていました。 今では古いテーマと言えるでしょうが、私がつくったブログには、まだ「Stinger5」をベースに稼働中ものもあります。 このページでは「Stinger5」のサイドバーにウイジェット領域を追加する方法を紹介します。 特に「Stinger5」でなくてもノウハウは同じです。 ウイジェット領域はこんな風に追加するということを紹介します。 【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。 「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非！ 「Arkhe」の詳細を見る 「Arkh

弊社コーポレートサイトのトップに動画を配置することを決めてから、とても苦労することになりました。 動画の圧縮を行ってもなかなかデータ量が減らないのです。 そこで、動画を2つに分割し静止画とともに3パターンのトップページをランダムに表示することにしました。 動画の分割はQuickTime Player 7で簡単にできます。 その後は、このテーマのhead.phpを書き換えればOKです。 これで1度に読み込まれる動画の重さはほぼ半分になります。

WordPressテーマTCD「UNIQUE」はWordPressテーマTCDの中でも多くのカスタマイズを行ったテーマです。 その一例を紹介します。 「UNIQUE」にはカスタムCSSを読み込む機能があるので、ページ毎にデザインを変更することが可能です。 しかし、カスタムCSSの後に何か別のCSSを読み込んでいたり、コードエディターが使えないなどの不便な点もあります。 そこで、｢head.php｣をカスタマイズして独自のCSSを読み込むことにしました。 問題となるのが｢head.php｣のwp_headアクションフック関数の再宣言エラーです。 このページでは関数の再宣言エラーの回避方法をとりあげます。 ｢head.php｣のカスタマイズは、以下の手順です。 子テーマにhead.phpを配置 子テーマのfunctions.phpで親テーマのhead.phpの関数を削除 再宣言エラーを回避する

ホームページの要素を制御したり、CSSをコントロールしたりする上で、便利なのがJavaScriptです。 最近ではCSSも進化しているので、昔ほどJavaScriptに依存していないのかもしれませんが、JavaScriptはホームページを作る際には必須の技術だといえます。 また、JavaScriptは使えないけどjQueryは簡単という印象をお持ちの方もいらっしゃるかもしれません。 jQueryは「JavaScriptライブラリ」なので、簡単にいうと一定の使い方の決まりで、JavaScriptを使いやすくしたものです。 HTMLの要素を扱いやすいので、ホームページを作る際には、使用の機会は多いと思います。 JavaScriptにしてもjQueryにしても比較的習得しやすい言語なので、完全に理解していなくても使えてしまいます。 しかし、上手く動かないケースもあります。 動かないほとんどの原因

HOME開発運用にチャレンジスクリプティングに挑戦WordPressのRSSを「rss-php」ライブラリを使ってPHPで読む、JSONをJavaScriptで処理 現在ではRSS（Really Simple Syndication）リーダーはそれほど使われていないようですが、WordPressにはRSSフィードを出力する機能が備わっています。 たとえば、当ブログの場合は「https://www.theme3.net/feed/」のアドレスでRSSフィードを見ることができます。 このRSSデータを利用すれば、クロスドメインのブログ情報を一箇所に集めたり、別のブログのニュース一覧を作ったりすることができるので、とても便利です。 「rss-php」ライブラリを使用すればRSSフィードを利用できます。「rss-php」にはキャッシュの処理も組み込まれています。 このページではRSSをphpで利用

レスポンシブ・デザインのランディングページで、jQueryプラグイン「slider.js」を使って、フル画面の画像tickerを設置しました。 しかし、小さい画面からブラウザのウインドウを広げた際、画像が足りない現象が起きてしまいました。 ランディングページなので、なるべく簡単に対処したかったので、リロードすることにしました。 この記事は2020年の記事のリライトです。 現在では「slider.js」をオススメしません。代わりに「Swiper.js」を使用するとよいでしょう。 この記事ではリサイズイベントの間引き方法やユーザーエージェントの判定方法等、基本的なノウハウを掲載しています。 現在のユーザーエージェント判定はiOS13以降のiPad判定が必要となる場合があります。 こちらも最後に解説します。 【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GP

いつも同じスライダーを使用するのに飽きたら、「Vegas」を使ってみるとよいでしょう。 「Vegas」がよいのはレスポンシブデザインでPCとスマホで画像を切り替えたりするのも簡単にできるところです。 これについては最後に解説します。 WordPressテーマTCDの「UNIQUE」にも使ってあったので、たまたま弊社サイトで動画を配置したところ、不良があることが分かりました。 画像のスライドショーしかやったことが無い場合は気づかないでしょう。 不良と言ってもWindowsのみ横より縦の方が長いブラウザサイズになったときに起こるものなので、実害はあまりないかもしれません。 縦長の画面サイズになったとき動画が全画面になりません。上下に空きが出てしまいます。 この現象も対策してみました。 【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GPLテーマ「 Arkhe

デザインワークで、なくてはならないソフトウェアがAdobe Illustratorです。 Adobe Photoshopと共にあらゆるデザインに必須の定番アプリです。 私の場合、デザインワークは全てIllustratorで行っています。 Photoshopは画像編集や加工を行うアプリとして割り切っています。 デザイン・構成をスピーディーに行うためには、PhotoshopをよりはIllustratorの方が絶対に速いと思っています。 しかし、Adobe Illustratorは取っつきにくいと、よく耳にします。 これはベジェ曲線の扱いによるものだと思います。 ベジェ曲線の使い方をクリアしてしまえば、Adobe Illustratorほど使いやすいツールはありません。 私がAdobe Illustratorを初めて使ったのは、まだシステム業界にいた時のことで、ほぼ独学でした。（※筆者はシステム

私は今まで多数の個人ブログを作成・運営してきましたが、有料のテーマを使うのはこのサイトが初めてでした。 使ってみると「WordPressテーマTCD」はホームページを作るのに最適なテーマだと分かりました。 しかし、カスタマイズは一般の方には難しい部分もあります。 このページが、少しでも参考になればと思います。 ※WordPressテーマ「UNIQUE」は少し古いテーマです。現在のWordPressテーマTCDの各テーマに共通しない部分もありますので、ご注意ください。 【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。 「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非！ 「Arkhe」の詳細

WEBや会社案内パンフレット等の仕事ばかりやっていると、印刷インクの量など、念頭から抜け落ちてしまいます。 そのようなおり、雑誌広告の企画デザインを久しぶりに受注することになりました。 雑誌広告では、様々な制約が多く今回の「TAC値」も、その一つです。 そもそも「TAC値」とはなんでしょう？ 【PR】「Theme3」では、Adobe Creative Cloudプラン付きe-ラーニングに「 アドバンスクールオンライン 」をオススメしています。 アドバンスクールオンラインの詳細を見る 14ヶ月間学び放題 充実した11講座 Adobe Creative Cloud1年プラン付き ご購入は以下のバナーをクリックしてください。 TAC値とは 「TAC値」とは印刷におけるインクの総量のことをいいます。 印刷の場合、C（シアン）M（マゼンタ）Y（イエロー）K（ブラック）4色ののインクの掛け合わせ表現な

アンカーリンク時のURLについて ページ内リンク（アンカーリンク）は目次のようなリンクリストからページの該当の部分にジャンプさせる際に使用します。 ページのURLに「#」を付加して、URLを変えてリンクします。 「#」以降にリンク先のIDを指定します。 例えば、以下のようにリンクします。 <a href="https://www.theme3.net/parent-theme-update/#i-2">アンカーリンク</a> ただし、アンカーリンクは必ずURLが変わってしまうというものではありません。 URLを変えずにページ内リンクを行うこともできます。 URLを変えないアンカーリンク ちなみに私はスクラッチでサイトを作成する場合、以下のようなJavaScriptを使っています。 //ページ内リンク function anchorlink(targetID){ if( !document.

9月末にはステマ規制対応のテーマ更新が続きました。 そのなかで、どうしてもステマ対応機能が追加されないテーマがありました。 原因が分からず販売元に問い合わせして、やっと解決したのですが、単純なケアレスミスでした。 原因は子テーマを使ってphpファイルをカスタマイズしていたからです。 私はそのことをうっかり忘れていたのです。 このミスはけっこう陥りやすいと思いますので、このページで対処方法を含めてまとめておくことにします。 【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。 「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非！ 「Arkhe」の詳細を見る 「Arkhe Pro Pack」（サブ

WordPressの投稿やカスタム投稿のアーカイブは標準であれば投稿日付でソートされます。 管理画面の場合も同様です。 また、カテゴリーは文字によってソートとされます。 しかし、任意の順で表示したほうがよいという場合はかなり多いと思います。 過去の記事で作成したポートフォリオも、そのような性格のサイトです。