boneを試す。Step 5: Theme Basic Dataをなぞる

スポンサーリンク
この記事は約26分で読めます。

ステップ5:テーマ基本データをなぞる

style.cssファイルはテーマディレクトリにあります。

wp-content/themesフォルダ構成

wp-content/themesフォルダ
│  index.php
│  
├─theme-bones-master
│  │  .gitattributes
│  │  .gitignore
│  │  404.php
│  │  archive-custom_type.php
│  │  archive.php
│  │  CHANGELOG.md
│  │  comments.php
│  │  composer.json
│  │  favicon.ico
│  │  favicon.png
│  │  footer.php
│  │  functions.php
│  │  header.php
│  │  index.php
│  │  page-custom.php
│  │  page.php
│  │  readme.md
│  │  screenshot.png
│  │  screenshot1.png
│  │  search.php
│  │  searchform.php
│  │  sidebar.php
│  │  single-custom_type.php
│  │  single.php
│  │  style.css
│  │  taxonomy-custom_cat.php
│  │  
│  ├─library
│  │  │  admin.php
│  │  │  bones.php
│  │  │  custom-post-type.php
│  │  │  
│  │  ├─css
│  │  │      editor-style.css
│  │  │      ie.css
│  │  │      login.css
│  │  │      style.css
│  │  │      
│  │  ├─images
│  │  │      apple-touch-icon.png
│  │  │      custom-post-icon.png
│  │  │      login-logo.png
│  │  │      nothing.gif
│  │  │      nothumb.gif
│  │  │      win8-tile-icon.png
│  │  │      
│  │  ├─js
│  │  │  │  scripts.js
│  │  │  │  
│  │  │  └─libs
│  │  │          modernizr.custom.min.js
│  │  │          
│  │  ├─scss
│  │  │  │  admin.scss
│  │  │  │  config.rb
│  │  │  │  editor-style.scss
│  │  │  │  ie.scss
│  │  │  │  login.scss
│  │  │  │  style.scss
│  │  │  │  
│  │  │  ├─breakpoints
│  │  │  │      _1030up.scss
│  │  │  │      _1240up.scss
│  │  │  │      _2x.scss
│  │  │  │      _481up.scss
│  │  │  │      _768up.scss
│  │  │  │      _base.scss
│  │  │  │      
│  │  │  ├─modules
│  │  │  │      _alerts.scss
│  │  │  │      _buttons.scss
│  │  │  │      _forms.scss
│  │  │  │      
│  │  │  └─partials
│  │  │          _functions.scss
│  │  │          _grid.scss
│  │  │          _ie_grid.scss
│  │  │          _mixins.scss
│  │  │          _normalize.scss
│  │  │          _print.scss
│  │  │          _typography.scss
│  │  │          _variables.scss
│  │  │          
│  │  └─translation
│  │          da_DK.mo
│  │          da_DK.po
│  │          default.mo
│  │          default.po
│  │          de_DE.mo
│  │          de_DE.po
│  │          es_ES.mo
│  │          es_ES.po
│  │          fi_FI.mo
│  │          fi_FI.po
│  │          fr_FR.mo
│  │          fr_FR.po
│  │          he_IL.mo
│  │          he_IL.po
│  │          hr.mo
│  │          hr.po
│  │          hu_HU.mo
│  │          hu_HU.po
│  │          it_IT.mo
│  │          it_IT.po
│  │          ja.mo
│  │          ja.po
│  │          lt_LT.mo
│  │          lt_LT.po
│  │          nb_NO.mo
│  │          nb_NO.po
│  │          nl_NL.mo
│  │          nl_NL.po
│  │          pl_PL.mo
│  │          pl_PL.po
│  │          pt_PT.mo
│  │          pt_PT.po
│  │          README.md
│  │          ro_RO.mo
│  │          ro_RO.po
│  │          ru_RU.mo
│  │          ru_RU.po
│  │          sv_SE.mo
│  │          sv_SE.po
│  │          zh_CN.mo
│  │          zh_CN.po
│  │          
│  └─post-formats
│          format-aside.php
│          format-audio.php
│          format-chat.php
│          format-gallery.php
│          format-image.php
│          format-link.php
│          format-quote.php
│          format-status.php
│          format-video.php
│          format.php
│          
├─twentynineteen
│  │  404.php
│  │  archive.php
│  │  comments.php
│  │  footer.php
│  │  functions.php
│  │  header.php
│  │  image.php
│  │  index.php
│  │  package-lock.json
│  │  package.json
│  │  page.php
│  │  postcss.config.js
│  │  print.css
│  │  print.scss
│  │  readme.txt
│  │  screenshot.png
│  │  search.php
│  │  single.php
│  │  style-editor-customizer.css
│  │  style-editor-customizer.scss
│  │  style-editor.css
│  │  style-editor.scss
│  │  style-rtl.css
│  │  style.css
│  │  style.scss
│  │  
│  ├─classes
│  │      class-twentynineteen-svg-icons.php
│  │      class-twentynineteen-walker-comment.php
│  │      
│  ├─fonts
│  │      NonBreakingSpaceOverride.woff
│  │      NonBreakingSpaceOverride.woff2
│  │      
│  ├─inc
│  │      back-compat.php
│  │      color-patterns.php
│  │      customizer.php
│  │      icon-functions.php
│  │      template-functions.php
│  │      template-tags.php
│  │      
│  ├─js
│  │      customize-controls.js
│  │      customize-preview.js
│  │      priority-menu.js
│  │      skip-link-focus-fix.js
│  │      touch-keyboard-navigation.js
│  │      
│  ├─sass
│  │  │  _normalize.scss
│  │  │  
│  │  ├─blocks
│  │  │      _blocks.scss
│  │  │      
│  │  ├─elements
│  │  │      _elements.scss
│  │  │      _lists.scss
│  │  │      _tables.scss
│  │  │      
│  │  ├─forms
│  │  │      _buttons.scss
│  │  │      _fields.scss
│  │  │      _forms.scss
│  │  │      
│  │  ├─layout
│  │  │      _layout.scss
│  │  │      
│  │  ├─media
│  │  │      _captions.scss
│  │  │      _galleries.scss
│  │  │      _media.scss
│  │  │      
│  │  ├─mixins
│  │  │      _mixins-master.scss
│  │  │      _utilities.scss
│  │  │      
│  │  ├─modules
│  │  │      _accessibility.scss
│  │  │      _alignments.scss
│  │  │      _clearings.scss
│  │  │      
│  │  ├─navigation
│  │  │      _links.scss
│  │  │      _menu-footer-navigation.scss
│  │  │      _menu-main-navigation.scss
│  │  │      _menu-social-navigation.scss
│  │  │      _navigation.scss
│  │  │      _next-previous.scss
│  │  │      
│  │  ├─site
│  │  │  │  _site.scss
│  │  │  │  
│  │  │  ├─footer
│  │  │  │      _site-footer.scss
│  │  │  │      
│  │  │  ├─header
│  │  │  │      _site-featured-image.scss
│  │  │  │      _site-header.scss
│  │  │  │      
│  │  │  ├─primary
│  │  │  │      _archives.scss
│  │  │  │      _comments.scss
│  │  │  │      _posts-and-pages.scss
│  │  │  │      
│  │  │  └─secondary
│  │  │          _widgets.scss
│  │  │          
│  │  ├─typography
│  │  │      _copy.scss
│  │  │      _headings.scss
│  │  │      _typography.scss
│  │  │      
│  │  └─variables-site
│  │          _colors.scss
│  │          _columns.scss
│  │          _fonts.scss
│  │          _structure.scss
│  │          _transitions.scss
│  │          _variables-site.scss
│  │          
│  └─template-parts
│      ├─content
│      │      content-excerpt.php
│      │      content-none.php
│      │      content-page.php
│      │      content-single.php
│      │      content.php
│      │      
│      ├─footer
│      │      footer-widgets.php
│      │      
│      ├─header
│      │      entry-header.php
│      │      site-branding.php
│      │      
│      └─post
│              author-bio.php
│              discussion-meta.php
│              
├─twentyseventeen
│  │  404.php
│  │  archive.php
│  │  comments.php
│  │  footer.php
│  │  front-page.php
│  │  functions.php
│  │  header.php
│  │  index.php
│  │  page.php
│  │  README.txt
│  │  rtl.css
│  │  screenshot.png
│  │  search.php
│  │  searchform.php
│  │  sidebar.php
│  │  single.php
│  │  style.css
│  │  
│  ├─assets
│  │  ├─css
│  │  │      blocks.css
│  │  │      colors-dark.css
│  │  │      editor-blocks.css
│  │  │      editor-style.css
│  │  │      ie8.css
│  │  │      ie9.css
│  │  │      
│  │  ├─images
│  │  │      coffee.jpg
│  │  │      espresso.jpg
│  │  │      header.jpg
│  │  │      sandwich.jpg
│  │  │      svg-icons.svg
│  │  │      
│  │  └─js
│  │          customize-controls.js
│  │          customize-preview.js
│  │          global.js
│  │          html5.js
│  │          jquery.scrollTo.js
│  │          navigation.js
│  │          skip-link-focus-fix.js
│  │          
│  ├─inc
│  │      back-compat.php
│  │      color-patterns.php
│  │      custom-header.php
│  │      customizer.php
│  │      icon-functions.php
│  │      template-functions.php
│  │      template-tags.php
│  │      
│  └─template-parts
│      ├─footer
│      │      footer-widgets.php
│      │      site-info.php
│      │      
│      ├─header
│      │      header-image.php
│      │      site-branding.php
│      │      
│      ├─navigation
│      │      navigation-top.php
│      │      
│      ├─page
│      │      content-front-page-panels.php
│      │      content-front-page.php
│      │      content-page.php
│      │      
│      └─post
│              content-audio.php
│              content-excerpt.php
│              content-gallery.php
│              content-image.php
│              content-none.php
│              content-video.php
│              content.php
│              
└─twentysixteen
    │  404.php
    │  archive.php
    │  comments.php
    │  footer.php
    │  functions.php
    │  header.php
    │  image.php
    │  index.php
    │  page.php
    │  readme.txt
    │  rtl.css
    │  screenshot.png
    │  search.php
    │  searchform.php
    │  sidebar-content-bottom.php
    │  sidebar.php
    │  single.php
    │  style.css
    │  
    ├─css
    │      blocks.css
    │      editor-blocks.css
    │      editor-style.css
    │      ie.css
    │      ie7.css
    │      ie8.css
    │      
    ├─genericons
    │      COPYING.txt
    │      genericons.css
    │      Genericons.eot
    │      Genericons.svg
    │      Genericons.ttf
    │      Genericons.woff
    │      LICENSE.txt
    │      README.md
    │      
    ├─inc
    │      back-compat.php
    │      customizer.php
    │      template-tags.php
    │      
    ├─js
    │      color-scheme-control.js
    │      customize-preview.js
    │      functions.js
    │      html5.js
    │      keyboard-image-navigation.js
    │      skip-link-focus-fix.js
    │      
    └─template-parts
            biography.php
            content-none.php
            content-page.php
            content-search.php
            content-single.php
            content.php
            

基本的にBonesの基本テーマはここでは実際のスタイルを使用していません
管理者インタフェース(ダッシュボード)に情報を表示するためのデータのみを使用しています。

style.css内容

Theme Name: テーマの名前(必須)
Theme URI: テーマURL
Description:テーマの説明
Author: テーマの作者
Author URI:作者のURL
Version: テーマのバージョン
Tags:テーマのタグ

外観=>テーマ=>テーマの詳細で表示

/******************************************************************
Theme Name: Bones (Rename Me!)
Theme URI: http://www.themble.com/bones
Description: This site was built using the Bones Development Theme. For more information about Bones or to view documentation, you can visit the <a href="https://github.com/eddiemachado/bones/issues" title="Bones Issues">Bones Issues</a> page on Github. You'll want to customize this for your clients with your own information.
Author: Your Name Here
Author URI: http://www.yoururlhere.com
Version: 1.7
Tags: fluid-layout, responsive-layout, accessibility-ready, translation-ready, microformats, rtl-language-support

License: WTFPL
License URI: http://sam.zoy.org/wtfpl/
Are You Serious? Yes.


MAKE SURE TO READ BELOW BEFORE GETTING STARTED FOR THE FIRST TIME!
------------------------------------------------------------------

You may be thinking…

WHOA, WHOA, WHOA…WHAT HAPPENED HERE?

But before you freak out, let me take a few minutes to explain.

Bones now uses Sass by default. If you prefer using regular CSS,
then feel free to modify this theme how you like and keep a copy
as your own personal starting point.

DON'T DISMISS IT JUST YET THOUGH, USING Sass ISN'T AS COMPLICATED AS YOU THINK.

It does take a few minutes to wrap your head around, but it will all
be worth it. Need a quick intro? Here are a few quick reads:


301 Moved Permanently
(BUY THIS)
Preprocess THIS!
A while ago I wrote a little post discussing my dive into CSS preprocessing , and, at the time, I wasn’t totally convinc...
Sass: A Designer’s Perspective | Viget
Viget is a full-service interactive agency that helps plan, design, build, and measure successful websites and digital p...
OOCSS + Sass = The Best Way to Write CSS by Ian Storm Taylor
Sass Style Guide | CSS-Tricks
With more people than ever writing in Sass, it bears some consideration how we format it. CSS style guides are common, s...
Developing With Sass and Chrome DevTools | Envato Tuts+
In this article we'll take a look at how we can better integrate Chrome DevTools into our Sass development workflow.Tuto...
I would HIGHLY RECOMMEND, if you are going to be working with Sass, that you work locally. The browsers don't understand Sass and compiling it on the server takes a bit of a setup. That being said, here are a few MUST HAVE TOOLS for working with a pre-processor: (You really only need one of them) CodeKit: (Highly Recommended)
301 Moved Permanently
Compass App: (Windows / Mac Users)
http://compass.handlino.com/
These applications compile Sass into valid CSS. This way you can keep your production files easy to read and your CSS minified and speedy. Simply set the output to the library/css folder and you are all set. It's a thing of beauty. You can also setup auto compiling with Grunt or using Terminal on OSX. It's a bit complicated to setup so if you aren't familiar with it, just get one of the automated applications. --------------------------------------------------------------- Remember, once you download Bones it's up to you how to use it, so go nuts. Set things up and develop in a way that's easiest for you. If using Sass is still a bit confusing for you, then remove it and customize this template as you see fit. If you're a bit uneasy about using Sass or just want a familiar setup, take a few minutes and think about how much better a developer you can become by just TRYING out new technologies. It may be tough at first but it WILL make you a better developer. TRUST ME ON THIS. Give it a week, maybe two, and you will never go back. If you STILL can't get on board and want to jump ship, that's cool. Bones is not for everyone and that's ok, I mean I'm not hurt by it, whatever, I never liked you anyway. Here are some other alternatives if you're looking for a blank starter theme. I'll just be here waiting by the window, in case you ever decide to come back.
Sage | WordPress Starter Theme with Tailwind CSS & Blade
WordPress starter theme with Tailwind CSS, Laravel Blade templates, and a modern development workflow.
(way more complex but has a ton of cool features)
403 Forbidden
(super clean and great markup)
Build software better, together
GitHub is where people build software. More than 150 million people use GitHub to discover, fork, and contribute to over...
(not sure if it's still active, but still good) That's it. It's time to jump in and get your hands dirty. Seriously, why are you still reading this? Get to work! If you have any issues or problems, you can create an issue on github or find me on Twitter: @eddiemachado (SHAMELESS PLUG!). Happy Developing! (When you're done, you may want to remove all this nonsense before passing it along to your client.) ******************************************************************/ /* WordPress Probz So Theme Check (http://wordpress.org/plugins/theme-check/) is constantly telling me that it needs these classes in the CSS even though they are in the REAL stylesheet in library/css/style.css. So we're gonna drop these here to keep it happy. Great work, Theme Check (eye roll) */ .sticky {} /* DO NOT EDIT THIS */ .gallery-caption {} /* THESE ARE USELESS */ .bypostauthor {} /* THEY ARE ONLY TO KEEP THEME CHECK HAPPY */

前へ戻る 次へ進む

error: Content is protected !!