プログラミング

WordPress jQuery + CSS + ショートコードで モーダルウインドウを自作する

jQuery と CSS で WordPress にモーダルウインドウを実装してみました。

事前準備:
独自jsファイル 及び  独自cssファイルをインクルードする。
single.php に jsファイルをインクルード
これにより投稿詳細ページのみ有効なjavascriptファイルを作成する。
独自jsファイル 及び独自cssファイルをインクルードできるプラグイン
「 Custom CSS and Javascrip 」

モーダルウインドウ関連はプラグインでかなりあります。
今回はWordPress の学習を兼ね作成してみました。

解説は別途作成しようと思います。まずはサンプルのみとします。

モーダルウインドウサンプル


ショートコード追加
ショートコード追加
CSS
CSS
Modal デフォルト
Modal デフォルト
JQuery
JQuery

最近の記事

  1. wordpres5をubuntu nginxにインストール
  2. ubuntu 20.04 nginx php mysql Webサーバー環境整備
  3. Ubuntu nginx SSL
  4. EC-CUBE 4.0 インストール
  1. サーバー環境

    Aws EC2 Apache + Mysql + php7 構築の記録
  2. Web・デザイン

    wordpress上でPre要素で ソースコードを行番号付きでエディターのように…
  3. Web・デザイン

    CSS3 機能 セレクタ、target擬似クラス、構造擬似クラスについて学ぶ
  4. Web・デザイン

    ページ上の要素をふるわす CSShake 「CSSアニメーションライブラリー」
  5. プログラミング

    郵便番号データベースで多対多のリレーション
PAGE TOP