Giter Club home page Giter Club logo

liquid-press's Introduction

WordPress公式有料テーマ

issues

  • 開発中または検討中の機能はissuesに登録されています。
  • Milestonesがセットされているものは実装予定の機能です。Milestonesページで進捗が確認できます。
  • 各issueにはテーマ名のラベルが付いています。Allは全テーマ共通の機能です。
  • Openは開発中、Closedは開発済のタスクです。
  • 全てが実装されるとは限りませんので予めご了承ください。

開発テスト用

開発状況の通知を受け取るにはWatchしてください。

liquid-press's People

Contributors

lqdjp avatar

Stargazers

pugiemonn avatar Yoshi Hi avatar Hiroshi Urabe avatar  avatar

Watchers

 avatar masahirokusume avatar  avatar  avatar

liquid-press's Issues

リファクタリング

WordPressのルールを厳守

  1. 関数名の命名規則を統一し、プラグイン等との干渉を防止
  2. ファイルの読み込みを wp_enqueue に集約、jqueryに関する重複削除
  3. add_theme_support を after_setup_theme に集約

Pタグの自動挿入ありなし設定

カスタマイズ>レイアウトから、作成した記事内の改行をpタグに変換して自動挿入する、しないを設定できるようにする

RWD+の仕組みを改善

  • 表示切替時のサイズ微調整
  • jQuery.cookie から LocalStorage に変更
  • #付きURLの表示切替問題を修正
  • Androidタブレットは表示切替対象から除外する
  • Androidタブレットはメニューのサブアイテムをプルダウン化する
    common.js

Bootstrap4 バージョンアップ

Bootstrap 4 安定版がリリースされましたので、LIQUID PRESS でも対応いたしました。
可変性の高いFlexユーティリティに対応し、レスポンシブ対応やグリッドカラムレイアウトなどの作成が容易になります。

概要

  • Bootstrap v4.0.0-alpha から Bootstrap v4.1.0 へアップデートしました。
  • LIQUID PRESS は、v0.9系(最終v0.9.7.4) から v1.0系 へメジャーアップデートしました。
  • アップデート方法や更新履歴などについては、WordPress管理画面>外観>テーマのサポート をご参照ください。

サポートブラウザ

IE9以降からIE10以降へ変更になります。

ご注意事項

  • テーマのアップデート前に、テーマファイルのバックアップ作成を推奨します。
  • 子テーマを利用されている場合は、親テーマから最新ファイルを取得して差し替えてください。
  • カスタマイズをされている場合は、アップデート前に下記アップデートガイドをご参照ください。
  • Bootstrap フレームワークの仕様が一部変更されています。更新後はキャッシュをクリアしてください。
  • ウィジェットのカラム設定をされている場合は、お手数ですが再設定が必要になります。
  • カスタマイズについてはサポート対象外とさせて頂いております。何卒ご了承ください。

アップデートガイド

Bootstrap4 alpha版から安定版へのアップデートで、class名などの変更がありました。
LIQUID PRESS でも該当する箇所を更新しておりますので、詳しくは下記をご参照ください。
(一部対象ファイルはテーマによって異なる場合があります。)

Bootstrap4 ファイル構成

Bootstrap4 安定版のオリジナルファイルに更新しています。
Sassでカスタマイズしたものに差し替えることも可能です(子テーマ推奨)。

  • /css/bootstrap.min.css
  • /js/bootstrap.min.js

LIQUID PRESS ファイル構成

LIQUID PRESS のCSS/JSファイルは下記です。

  • style.css
  • /js/common.min.js

レスポンシブ・ブレークポイント

変更内容

  • @media (max-width: 74.9em) を @media (max-width: 1199.98px) に変更
  • @media (max-width: 61.9em) を @media (max-width: 991.98px) に変更
  • @media (max-width: 47.9em) を @media (max-width: 767.98px) に変更
  • @media (max-width: 33.9em) を @media (max-width: 575.98px) に変更

対象ファイル

  • style.css

グリッド

変更内容

  1. col-xs-12 を col-12 に変更
  2. $liquid_prefix = "col-xs-"; を $liquid_prefix = "col-"; に変更
  3. col-xs-min-gutter を 削除(no-gutters 新設のため)
  4. col-md-3 col-sm-push-9, col-md-9 col-sm-pull-3 を col-md-3 order-md-last, col-md-3 order-md-first に変更
  5. row で囲む構成を変更

対象ファイル

  • 1: style.css, functions.php, archive.php, index.php, search.php, single.php
  • 2: functions.php
  • 3: style.css
  • 4: header.php(CORPORATE)
  • 5: popularposts.php(MAGAZINE)

表示ユーティリティ

変更内容

  1. hidden-sm-down を d-none d-md-block に変更
  2. hidden-md-up を d-md-none に変更
  3. none を d-none に変更

対象ファイル

  • 1,2: header.php, style.css, common.min.js, functions.php
  • 2: functions.php
  • 3: header.php, common.min.js

ナビゲーションバー

変更内容

  1. nav から bg-faded を削除
  2. nav に navbar-expand-md を追加
  3. navbar-toggle を navbar-toggler に変更
    4 .dropdown-menu { padding: 0; } を追加
  4. @media (max-width: 767.98px) { .navbar-nav { width: 100%; } } を追加
  5. @media (max-width: 575.98px) { .navbar .container { padding: 0 .9375rem; } } に変更
  6. @media (min-width: 47.9em) { .navbar-toggle { display: none; } } を削除
  7. .navbar-nav li, .navbar-nav li a { border-left: 0 none !important; border-right: 0 none !important; } } を削除
  8. @media (max-width: 767.98px) { .navbar-nav > .nav-item:last-child:not(.sticky-none) { margin-left: initial; } } を追加
  9. .navbar-nav > .nav-item:last-child:not(.sticky-none) { float: right; を margin-left: auto; } に変更
  10. .navbar-nav { margin: auto; } を追加
  11. fixed-top, navbar-fixed-top を fixed-top-custom, navbar-fixed-top-custom に変更

対象ファイル

  • 1,2,3: header.php
  • 3: style.css, common.min.js
  • 4,5,6,7: style.css
  • 8,9,10: style.css(CORPORATE)
  • 11: style.css(INSIGHT, SMART, PORTFOLIO)
  • 12: style.css, header.php, footer.php(INSIGHT, APP)

カルーセル

変更内容

  1. left carousel-control を carousel-control-prev に変更
  2. right carousel-control を carousel-control-next に変更
  3. icon icon-arrow-left2 を carousel-control-prev-icon に変更
  4. icon icon-arrow-right2 を carousel-control-next-icon に変更
  5. .carousel-control に関する記述を削除
  6. .carousel-indicators li { ... } に関する記述を変更
  7. carousel iOS10 fix(.carousel-inner)に関する記述を削除

対象ファイル

  • 1,2,3,4: index.php
  • 5,6,7: style.css

備考

  • 左右の矢印アイコンは、新たしいデザインに変わります。
  • インジケーターのアイコンは、旧デザインを維持します。

パンくずリスト

変更内容

  • で囲む
  • li に breadcrumb-item を追加
  • active に aria-current="page" を追加
  • #170

対象ファイル

  • single.php, page.php

ページ送り

変更内容

  1. pager を pagination に変更
  2. ul に justify-content-between を追加
  3. li の classを削除
  4. a に badge-pill を追加

対象ファイル

  • 1,2,3,4: single.php
  • 1: style.css

文字の体裁

変更内容

  • list-inline li に list-inline-item を追加

対象ファイル

  • single.php

管理画面のビジュアルエディタでのBootstrap対応

#81

その他

変更内容

  1. .screen-reader-text の指定に !important を追加
  2. .searchform の指定に width: 100%; を追加
  3. .card を article.card に変更(LIGHT)
  4. .headcol .head { width: inherit を max-width: 25% } に変更(PORTFOLIO)
  5. .list_big .post_links .post_thumb span { height: 237px; を 232px } に変更(MAGAZINE)

対象ファイル

  • 1,2,3,4,5: style.css

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.