Documentation - Master : CMS Format ver.2

概要

納品前にこのページは削除して下さい。

リポジトリ

https://github.com/Guitto-team/CMS_Format

マスター（リリース可能）

https://master-format.test-develop.site/wp-admin

ID：guitto
PW：test

開発用（リリース前／ステージング）

https://develop-format.test-develop.site/cms/wp-admin

ID：guitto
PW：test

導入手順

テストサーバー用意

詳細はこちら

WordPressの最新版をダウンロードする
Xserverからサブドメインを追加する
MySQLを追加する
FTPでWordPressをアップロードする
WordPressをインストールする
「All-in-One WP Migration」をインストールする
マスターフォーマットにて「All-in-One WP Migration」でファイルをエクスポート
エクスポートしたファイルをインポート
FTPでマスターフォーマットから/cms/dataをコピーする
画像（メディア）のアップロード先を変更(/cms/data/uploads)

ローカル環境用意

詳細はこちら

Local by Flywheelをインストールする
WordPressサイトの立ち上げ
ディレクトリ構造修正（サブディレクトリへ移す）
「All-in-One WP Migration」をインストールする
マスターフォーマットにて「All-in-One WP Migration」でファイルをエクスポート
エクスポートしたファイルをローカルサイトでインポート
FTPでマスターフォーマットから/cms/dataをコピーする
画像（メディア）のアップロード先を変更(/cms/data/uploads)

Git連携（GithubActionの設定）

詳細はこちら

ローカルに構築したサイトのディレクトリをGit管理にする
フォーマットからdeploy_develop.yml、.gitignore、package.json, .gulpfile.jsをコピーする
Githubにてリポジトリを作成する
作成したリポジトリにActions Secretを設定する
ローカルリポジトリを作成したリモートリポジトリにプッシュする
「develop」ブランチを切ってリモートにプッシュ
GithubActionsによるデプロイが成功しているか確認

開発手順

gulpfile.jsの変数をローカル環境に合わせる

Sassのコンパイル、webp画像変換をGulpで処理するようにしています。
設定ファイルの変数をローカル開発環境に合わせて下さい。

/gulpfile.js

                          
    const proxy = 'cms-format.local';     ⇦ LocalのSite Domain
    const source = './cms/';     ⇦ WP設置ディレクトリ名を変えていなければそのまま

パッケージをインストール（クローン後初回のみ）

VSCodeもしくはターミナルorコマンドプロンプトで構築したサイトのルートディレクトリ
（ex. /Users/user-name/Local Sites/cms-format/app/public/）
を開き下記コマンドを実行して下さい。
すると、package.jsonに記載されているパッケージがローカルインストールされます。
```
                          
    npm i -D
                          
                        
```
タスクの実行

パッケージがインストールされたら（ルート直下にnode_modulesディレクトリが生成されていたら）
下記コマンドを実行して下さい。
無事実行されれば、初回のSassコンパイルとwebp画像変換が行われローカルサーバーでブラウザが立ち上がります。
立ち上がった後は、変更監視をしているのでコードが変更される度にコンパイルされブラウザが自動で更新されます。
```
                          
    npx gulp
                          
                        
```
webpへの画像変換と圧縮

gulpが動作している状態で変換したい画像を以下ディレクトリに入れると即変換します。
/cms/wp-content/themes/template/assets/images/row/
サブディレクトリに分けても大丈夫です。尚、row以下のファイルはgit管理されません。
変換後の画像は以下ディレクトリに格納されます。
/cms/wp-content/themes/template/assets/images/webp/
カスタム投稿やブロックパーツの追加・編集方法は下記を参照下さい。

セキュリティ対策

WordPressはCMSの代表格ということもあり、ユーザー数が圧倒的に多く攻撃されやすい側面を持っています。
また、オープンソースである為、プログラム構造が誰でも見ることができ脆弱性を発見されやすいです。
100%安全にすることは出来ませんが、対策が可能なところはしっかりと対策を行って納品しましょう。

納品前セキュリティチェックリスト

やるべき対策

SiteGuardPluginの有効化
ログインパスワードの見直し
ログインの失敗回数を制限
ログインに画像認証を追加する
XMLRPCの無効化
WordPressの設定ファイルへのアクセス制限
利用していないテーマ・プラグインの削除
編集者権限のクライアント用アカウントを用意
WPとプラグインを最新版にする

やった方がいい対策

ログイン画面のURLを変更
「REST API」へのアクセス制限

デフォルト対応

CSSUI(v0.2.0)

本フォーマットはCSSUIを導入しています。
各UIコンポーネントは個別のcssファイルで管理されています。(assets/plugin/cssui/)
スタイルの変更にはデフォルトのCSS変数をオーバーライドするか、クラスを使用してカスタマイズして下さい。
参照：CSSUI - Pure CSS interactive components
※一部改変箇所有り

Accordion

デモ

ヘッダーをクリックすると、セクションに分割されたコンテンツが展開/折りたたまれます。

アイテム 1

Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.

アイテム 2

Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.

アイテム 3

Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.

使用方法

                  
    <section data-accordion>
      <div data-accordion-item>
        <input type="checkbox" id="panel-1">
        <label for="panel-1">
          アイテム 1 
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
        </label>
        <div data-accordion-panel>
          コンテントの内容
        </div>
      </div>
    </section>

Dropdown

デモ

ドロップダウンは、リンクのリストなどを表示するための、切り替え可能なコンテクストオーバーレイです。
カーソルを合わせるのではなく、クリックすることで切り替わります。

Select an option...

使用方法

                  
    <details data-dropdown>
      <summary>
        Select an option...
      </summary>
      <ul role="menu">
        <li><a href="#">Dropdown item</a></li>
        <li><a href="#">Dropdown item</a></li>
        <li><a href="#">Dropdown item</a></li>
      </ul>
    </details>

Modal

デモ

下のボタンをクリックすると、モーダルダイアログが表示されます。

Open Modal

使用方法

※背景固定（iOS対応）の為にjavascriptを使用しているのと、参照元とコードを変えています。

                  
    <a class="c-button" href="#modal-demo" data-modal-open>
      Open Modal
    </a>

    <div id="modal-demo" data-modal>
      <div id="dialog" data-modal-dialog role="dialog" aria-modal="true" aria-labelledby="dialog-title" tabindex="-1">
        <h3 id="dialog-title">モーダルタイトル</h3>
        <p>モーダルコンテント</p>
        <button data-modal-close>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
        </button>
      </div>
      <div data-modal-overlay data-modal-close></div>
    </div>

Slideout

デモ

下のボタンをクリックすると、スライドダイアログが表示されます。

Open Slideout

Slideout

Content for the slideout goes here. You can place just about any component or custom elements here.

使用方法

                  
    <a class="c-button" href="#slideout-demo" data-slideout-toggle>Open Slideout</a>

    <div id="slideout-demo" data-slideout-panel>
      <div data-slideout-header>
        <h3>Slideout</h3>
        <button data-slideout-close>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
        </button>
      </div>
      <p>Content for the slideout goes here. You can place just about any component or custom elements here.</p>
    </div>

Tabs

デモ

タブをクリックすると、セクションに分けられたコンテンツが切り替わります。（デフォルトではtab1~tab10まで対応しています）

First Tab Panel

Second Tab Panel

Third Tab Panel

使用方法

                  
    <div data-tabs>
      <input checked="checked" id="tab1" type="radio" name="tab" data-tab="tab1" />
      <input id="tab2" type="radio" name="tab" data-tab="tab2" />
      <input id="tab3" type="radio" name="tab" data-tab="tab3" />

      <nav>
        <label for="tab1" data-tab-label="tab1" role="tab">First Tab</label>
        <label for="tab2" data-tab-label="tab2" role="tab">Second Tab</label>
        <label for="tab3" data-tab-label="tab3" role="tab">Third Tab</label>
      </nav>

      <section data-tab-panel="tab1" role="tabpanel" aria-labelledby="tab1">
        First Tab Panel
      </section>
        <section data-tab-panel="tab2" role="tabpanel" aria-labelledby="tab1">
        Second Tab Panel
      </section>
      <section data-tab-panel="tab3" role="tabpanel" aria-labelledby="tab1">
        Third Tab Panel
      </section>
    </div>

Tooltip

デモ

下のリンクにカーソルを合わせたり、フォーカスを当てたりすると、ツールチップが表示されます。

使用方法

                  
    <a href="#" data-tooltip alt="Alt text" title="これはリンクです" role="tooltip" aria-label="Tooltip message">ホバーして下さい</a>

Sassスニペット

mixinにまとめている機能リスト

aspect-ratio
（画像縦横比）

概要

縦横比を維持したままレスポンシブ対応したい場合に使用して下さい。

デモ

@include aspect-ratio(16, 9);

centering
（センタリング）

概要

指定した要素を親要素の中央に配置します。

デモ

親要素

子要素

子要素に対して以下を指定

@include centering;

triangle
（三角形の作成）

概要

吹き出しを作ったりボタンに飾り付けをしたりする時に使用して下さい。

デモ

upward

&:before {
@include triangle(upward, 20px, 15px, var(--main-c));
}

rightward

&:before {
@include triangle(rightward, 15px, 20px, var(--main-c));
}

downward

&:before {
@include triangle(downward, 20px, 15px, var(--main-c));
}

leftward

&:before {
@include triangle(leftward, 15px, 20px, var(--main-c));
}

hover-underline
（ホバー時のアンダーラインアニメーション）

概要

aタグのアニメーション等に利用して下さい。
下記はすべて$weightと$colorの指定は省略したものになりますので、必要であれば例えば
@include hover-underline('fade', 'top', 4px, var(--main-c));のような形で追記してください。

デモ

Fade Top

Lorem ipsum

@include hover-underline('fade', 'top');

Fade Bottom

Lorem ipsum

@include hover-underline('fade', 'bottom');

Left to Right

Lorem ipsum

@include hover-underline('slide', 'left-right');

Right to Left

Lorem ipsum

@include hover-underline('slide', 'right-left');

Left in Right

Lorem ipsum

@include hover-underline('slide', 'left-in-right');

Right in Left

Lorem ipsum

@include hover-underline('slide', 'right-in-left');

Center

Lorem ipsum

@include hover-underline('slide', 'center');

line-clamp
（表示行数の制御）

概要

文章の行数を制限して三点リーダーを表示します。
デフォルトでは3行ですが、デザインに合わせて行数を変更して下さい。

デモ

デフォルト

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@include line-clamp;

行数指定

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@include line-clamp(4);

GSAPによるアニメーション

JavaScriptライブラリであるGSAPとScrollTriggerによるアニメーションの例です。

スクロールアニメーション
data-scroll

概要

複雑なスクロールアニメーションを実行したい場合は、指定の要素のdata属性に「data-scroll」を指定して下さい。
特定の位置までdata-scrollを指定した要素がきたらクラス「-view」を付与します。
後はお好みでクラスが付与した際の挙動をアレンジして下さい。

                  
                  const SCROLL_ELMS = document.querySelectorAll('[data-scroll]');
                  for (let i = 0; i < SCROLL_ELMS.length; i++) {
                    gsap.to( SCROLL_ELMS[i] ,{ // 動かす要素
                      scrollTrigger: {
                          trigger: SCROLL_ELMS[i] , // この要素まできたらアニメーション開始
                          start: "50 bottom", // ビューポートの設定（実行位置の変更）
                          // markers: true, // 検証用のマーカーを表示
                          onEnter: btnShowAnim, // 関数を実行
                      },
                    });
                    function btnShowAnim() {
                      SCROLL_ELMS[i].classList.add('-view');
                    }
                  }

スクロールアニメーション
data-appear-blur

概要

スクロールに合わせてテキスト等が現れるアニメーションです。
使用したい要素に対して、「data-appear-blur」を付与して下さい。

                  
                  <h2 data-appear-blur>タイトル</h2>

スクロールアニメーション
data-slidein-border

概要

スクロールに合わせてテキストに下線を引くアニメーションです。
使用したい要素に対して、「data-slidein-border」を付与して下さい。

                  
                  <h2 data-slidein-border>タイトル</h2>

スクロールアニメーション
data-appear-each

概要

スクロールに合わせてテキストが一文字ずつ現れるアニメーションです。
使用したい要素に対して、「data-appear-each」を付与して下さい。

                  
                  <h2 data-appear-each>タイトル</h2>

概要

リポジトリ

マスター（リリース可能）

開発用（リリース前／ステージング）

導入手順

開発手順

セキュリティ対策

CSSUI(v0.2.0)

Accordion

デモ

使用方法

Dropdown

デモ

使用方法

Modal

デモ

使用方法

Slideout

デモ

Slideout

使用方法

Tabs

デモ

使用方法

Tooltip

デモ

使用方法

Sassスニペット

aspect-ratio（画像縦横比）

概要

デモ

centering（センタリング）

概要

デモ

triangle（三角形の作成）

概要

デモ

hover-underline（ホバー時のアンダーラインアニメーション）

概要

デモ

Fade Top

Fade Bottom

Left to Right

Right to Left

Left in Right

Right in Left

Center

line-clamp（表示行数の制御）

概要

デモ

デフォルト

行数指定

GSAPによるアニメーション

スクロールアニメーションdata-scroll

概要

スクロールアニメーションdata-appear-blur

概要

スクロールアニメーションdata-slidein-border

概要

スクロールアニメーションdata-appear-each

概要

aspect-ratio
（画像縦横比）

centering
（センタリング）

triangle
（三角形の作成）

hover-underline
（ホバー時のアンダーラインアニメーション）

line-clamp
（表示行数の制御）

スクロールアニメーション
data-scroll

スクロールアニメーション
data-appear-blur

スクロールアニメーション
data-slidein-border

スクロールアニメーション
data-appear-each