Giter VIP home page Giter VIP logo

x-t9's Introduction

X-T9

100%

The X-T9 is designed on the premise of full site editing function, and the user can flexibly customize the header, footer, etc. This theme is mainly intended for use on business sites.

Develoment

npm install

sass watch

npm run watch

dist

npm run dist

Spacing

@update 1.1.0

Specified from theme.json

name default
xxs 0.375rem Don't fit
xs 0.75rem For when you want narrower than normal paragraph margins
sm 1.5rem Block margin / Gap margin
md 2.4rem Group margin
lg 4rem Section margin
xl 6rem Template bottom margin and so on

CSS naming

  • [ Component name / Project name ]--[ attribute ]
  • [ Component name / Project name ]__[ element name ]
  • [ Component name / Project name ]__[ element name ]--[ attribute ]

Memo（試行錯誤中）

ほぼ確定の事項

余白の考え方 : has-background

CSSで抹殺

背景があると、コアが以下の余白を追加してくる

.has-background {
	padding: 1.25em 2.375em;
}

そもそも余白をどれだけつけるかは場所によって異なるし、 場所によってはコアが .has-background に padding を追加しないケースがあるので、余計な混乱を避けるために css で 0　指定しておく。

メインエリアをグループでラップするかどうか？

  • ラップした場合グループの上下にpaddingを付与しない。 → グループ解除した場合に消えるのでスペーサーで対応する

Basefont size

360px : 14px -> 1200px : 16px 基準で自動可変

Replace

Exclude : readme.txt,readme.md,gulpfile.js

"ref":11229,

.php のみ対象

src="http://localhost:8888/wp-content/themes/x-t9
src="' . esc_url( get_template_directory_uri() ) . '

"url":"http://localhost:8888/wp-content/themes/x-t9
"url":"' . esc_url( get_template_directory_uri() ) . '

url(http://localhost:8888/wp-content/themes/x-t9
url(' . esc_url( get_template_directory_uri() ) . '

href="http://localhost:8888/information/
href="' . esc_url( get_post_type_archive_link( 'post' )  ) . '

"moreText":"Read more"
"moreText":"' . esc_html__( 'Read more', 'x-t9' ) . '"

>Service</
>' . esc_html__( 'Service', 'x-t9' ) . '</

>Information</
>' . esc_html__( 'Information', 'x-t9' ) . '</

>Read more</
>' . esc_html__( 'Read more', 'x-t9' ) . '</

>Main Column</
>' . esc_html__( 'Main Column', 'x-t9' ) . '</

>Side Column</
>' . esc_html__( 'Side Column', 'x-t9' ) . '</

>Contact</
>' . esc_html__( 'Contact', 'x-t9' ) . '</

>Category</
>' . esc_html__( 'Category', 'x-t9' ) . '</

>Archive</
>' . esc_html__( 'Archive', 'x-t9' ) . '</

>Tag Cloud</
>' . esc_html__( 'Tag Cloud', 'x-t9' ) . '</

"Category : "
"' . esc_html__( 'Category : ', 'x-t9' ) . '"

x-t9's People

Contributors

kurudrive avatar osmdik avatar sysbird avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar

Forkers

sumonst21

x-t9's Issues

デモデータの文字色指定の間違い？

bodyの文字色(text-normal)を赤にした時、
真ん中の段落の赤になってほしいが、左右の段落は黒いまま(インライン文字色が黒だから)
…は、意図的でしょうか？

body

アイキャッチの縦横比が固定なのは仕様でしょうか？

最近 x-t9 を触ってて、気になったのでメモです

アイキャッチに縦長画像を設定していても
aspect-ratio: 320/180
と固定の横長で表示されるのは仕様でしょうか？
どこかに設定ありますか？

私事ですが、お菓子袋(縦)をアイキャッチにしているような場合は向いてないのかな
x-t9 の仕様ということなら構わないです〜

その他CSS

  • メインメニュー枠線
  • メインメニュー余白
  • ボタンホバー
  • readmoreボタン

[ Site Logo Block] Image widthでの数値指定が効かない

環境

WordPress 5.9.2
X-T9 0.4.0

症状

Headerテンプレート内で Site Logo ブロックに画像を設定して、Image width にどんな数値を指定しても横幅が変わりませんでした。

Editor画面：

スクリーンショット 2022-03-22 午後2 31 08

フロントの様子：

スクリーンショット 2022-03-22 午後2 35 47

タグクラウドブロックをもう少しおしゃれにしたい

template-part/sidebar-post.html あたりにデフォルト配置してあるので、投稿アーカイブか投稿詳細ページで表示される

更新情報-株式会社サンプル

ブロックエディタ側で指定できる部分は極力ブロックエディタで指定してテーマにCSSをなるべく書かない方向で検討
※ 勿論なんともならない場合もあるので、無理だと思ったらCSS指定で可

参考

スクリーンショット 2022-12-05 14 27 17

リストブロックに対するCSSセレクタ検討

WP6.2 の環境で確認しました。（自分のローカルやVektor inc のサイトで確認しました）
Lightningテーマでは「リストアイコンの色」の項目があるのですが、X-T9に変更したら「リストアイコンの色」が表示されないようでした。なにか設定の問題でしょうか？

一旦issue をたてておきます　

固定ページを編集-‹-トップページのサイトタイトルチャンネル-—-WordPress (2)

固定ページでコメントが使えない

固定ページで「コメントを許可」してもコメント欄が表示されない
デフォルトテーマでは表示されますが、テーマによってまちまちのようです。もしかしたら、X-T9 の仕様でしょうか？

リストブロックに共通余白設定をつけると、管理画面上でmarginとfont-sizeが小さくなってしまう（フロントはOK）

投稿を編集-“Lightning-G3-Pro-UnitでVK-Pattern-Libraryのランディングページ（LP）のパターンを固定ページに設置する手順”-‹-株式会社ベクトル-—-WordPress

この辺のCSSに上書きされるようでした

.editor-styles-wrapper ul[class*=vk_][class*=list]:where(:not(.vk_tableOfContents_list)) {
    padding: 0;
    margin: 0;
    --vk-margin-list-menu-left-first: var(--wp--custom--spacing--menu-indent);
}

.editor-styles-wrapper ul.wp-block-archives-list li, .editor-styles-wrapper ul.wp-block-categories-list li, .editor-styles-wrapper ul[class*=wp-block][class*=__list]:where(:not(.wp-block-latest-posts__list)) li, .editor-styles-wrapper ul[class*=vk_][class*=list]:where(:not(.vk_tableOfContents_list)) li {
    list-style: none;
    margin: 0;
    font-size: var(--wp--preset--font-size--small);
}

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.