• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

「テーマの使い方」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(管理画面から新しいテーマを追加する)
(内容を「このページは https://ja.wordpress.org/support/article/using-themes/ へ移動しました。」で置換)
 
1行目: 1行目:
{{テーマ・テンプレートガイド}}
+
このページは https://ja.wordpress.org/support/article/using-themes/ へ移動しました。
__TOC__
+
テーマシステムが導入される前、WordPressが表示する内容のデザインは<tt>index.php</tt>とコメント用のファイルのみで処理されていました。
+
 
+
デザインを扱うのはスタイルシートだけでした。カテゴリーページやアーカイブページを含め、それ以外のページはすべて<tt>index.php</tt>内のパラメータにより処理されていたのです。
+
 
+
テーマシステムは2つの利便性をもたらしてくれました。
+
 
+
; 物理的に各項目を分割
+
: WordPressの新しいモジュール式[[テンプレート入門|テンプレートファイル]]システムは[[用語集#PHP|PHP]]ファイルを複数の部品に分割することに寄与しました。これにより、[[Category Templates|カテゴリーアーカイブ]]/[[:en:Category Templates|en]]や[[Creating_an_Archive_Index|月別アーカイブ]]/[[:en:Creating_an_Archive_Index|en]]や個別記事ページのような、ページに応じたデザイン・ファンクションが可能になりました。
+
 
+
; レイアウトやデザインの変更を簡単に
+
: アップロードできる環境さえあれば、テーマファイルをアップロードし管理画面から変更するだけでサイト全体のデザインを変えることが出来るようになりました。
+
 
+
'''以前の方法はまだ機能しています。'''嘗ての方法を使っていても、テーマファイルを加える邪魔はしませんし、簡単に切り替えることも出来ます。
+
 
+
== テーマとは何か ==
+
 
+
簡単に言えば、WordPressのテーマシステムとはブログの「着せ替え」をするということです。ですが、ただの「着せ替え」以上のものを持っています。着せ替えというと、ただデザインが変わるというだけになってしまいます。WordPressのテーマは見た目の調整だけでなく、'''表示する内容'''も操ることが出来るのです。
+
 
+
WordPressのテーマはファイルの集合体で、ブログの生成する内容とともにグラフィカルインターフェイスを生み出します。<!-- 微妙 -->これらのファイルは[[テンプレート|'''テンプレートファイル''']]と呼ばれています。テーマにより、ブログがどのように表示されるのかを変更できるので、コアファイルに手をつける必要はありません。また、テーマには改造したテンプレートファイルやイメージファイル(例: <tt>jpg</tt>, <tt>gif</tt>, <tt>png</tt>)、スタイルシート、任意のコード・ファイルを加えた[[Pages|ページ]]も加えることが出来ます。テンプレートファイルについての詳細は[[テンプレート入門]]にあります。
+
 
+
例えば、あなたはブログでチーズとガジェットについてたくさん書いているとしましょう。[[The Loop|ループ]]や[[テンプレート|テンプレートファイル]]を駆使して、チーズカテゴリーの記事はガジェットカテゴリーの記事とは違う見た目にすることが出来るのです。この素晴らしい機能のおかげで異なるページやカテゴリーによって見た目を変えるということが出来るのです。すべてはあなたの創造力次第なのです。カテゴリーや記事毎にテーマを変えたいときは、[[The Loop in Action]]/[[:en:The Loop in Action|en]]や[[Category Templates|カテゴリーテンプレート]]/[[:en:Category Templates|en]]を見てみて下さい。
+
 
+
== テーマを探す ==
+
 
+
[https://ja.wordpress.org/themes/ WordPressテーマディレクトリー]が、検証されたWordPressのテーマをフリーでダウンロードできる公式なサイトです。テーマの種類やスタイルで検索したり、テーマの動作デモを見ることができます。
+
<!--
+
* [http://wordpress.org/extend/themes/ Official WordPress Theme page]
+
* [http://codex.wordpress.org/Using_Themes/Theme_List|Codex WordPress Theme List]
+
* [http://themes.wordpress.net/ WordPress Theme Viewer]
+
-->
+
<!-- 英語版 Codex は誰でも編集できてしまうため、問題のあるテーマ紹介サイトが掲載されていることがあります。日本語版では WordPress.org 公式・公認サイトのみ掲載しましょう。 -->
+
<!--
+
* [http://www.emilyrobbins.com/how-to-blog/comprehensive-list-of-615-free-wordpress-15-and-20-themes-templates-available-for-download-266.htm How to Blog's List of 615+ Themes]
+
* [http://www.alexking.org/blog/2005/02/27/wordpress-theme-competition/ Alex King's WordPress Theme Competition]
+
* [http://www.redalt.com/Tools/builder.php WordPress Index and Theme Builder]
+
* [http://webdesignbook.net/themes/ WordPress Theme Park]
+
* [http://www.wordpresstheme.com/ WordPressTheme.com]
+
* [http://wpdemo.kaushalsheth.com/ Kaushal Sheth's Wordpress Theme Viewer]
+
* [http://wpthemes.info/ WP Themes. Info]
+
* [http://gallery.wordpress.com/ Gallery for WordPress]
+
* [http://www.johntp.com/wp-skins/ JohnTP's WordPress Skin Library]
+
* [http://www.skinsforwp.com/ Skins/Themes for WordPress]
+
* [http://www.gfxedit.com/themes/wordpress/ GFXedit.com Themes]
+
 
+
===Theme Announcements===
+
* [http://weblogtoolscollection.com/ Web Tools Collection]
+
* [http://www.bloggingpro.com/archives/category/wordpress-themes/ Blogging Pro WordPress Themes Category]
+
* [http://wordpress.org/support/forum.php?id=5 WordPress forums]
+
* [http://www.emilyrobbins.com/how-to-blog/comprehensive-list-of-615-free-wordpress-15-and-20-themes-templates-available-for-download-266.htm How to Blog's Comprehensive Theme List]
+
* [http://www.alexking.org/blog/2005/02/27/wordpress-theme-competition/ Alex King's WordPress Theme Competition]
+
* [http://webdesignbook.net/themes/ WordPress theme park]
+
 
+
-->
+
 
+
== テーマを使う ==
+
 
+
WordPressには最初から使えるように配布時にデフォルトテーマが入っています。テーマは管理画面から切り替えることができます。テーマのディレクトリに追加したテーマは、管理画面 &gt; 外観 &gt; テーマに表示されます。
+
 
+
=== テーマを追加する <span id="Adding_New_Themes"></span>===
+
 
+
WordPressには数多くのテーマがあります。
+
 
+
もし、テーマにReadmeファイル等がある場合は、それを先に読んでおいて下さい。テーマの導入に失敗しない為です。
+
 
+
'''テーマ開発者はテーマの使用方法を配布すべきです。'''なぜなら、テーマによっては特別な設定を必要とする場合があるからです。もし、以下の事を行ってもテーマが使えない場合は、作者に聞いてみてください。
+
 
+
テーマを導入するまでの基本的なステップ:
+
 
+
# テーマをダウンロードし、解凍する
+
:: 解凍時のディレクトリ構造は変えないこと。テーマ作者によってガイドラインが示されている時は'''それに従うこと'''。
+
# [[FTP_Clients|FTPクライアント]]/[[:en:FTP_Clients|en]]を使い、サーバーに接続する
+
# <tt>wp-content/themes</tt>ディレクトリにフォルダごとアップロードする
+
# WordPressにログインし、[[管理パネル|管理画面]]にアクセスする
+
# メニューからテーマをクリックする
+
# 利用可能なテーマから使用したいテーマをクリックする
+
 
+
これでブログのテーマが変更されます。
+
 
+
<!-- 英語版 14:15, 29 May 2010 Lloydbudd 版
+
[[Image:presentthemes2.7.png|thumb|right|Appearance Panel]]
+
 
+
There are many themes available for download that will work with your WordPress installation.
+
 
+
If the theme that you are installing provides instructions, be sure to read through and follow those instructions for the successful installation of the theme.  '''It is recommended that theme developers provide installation instructions for their own themes''', because themes can provide special optional functionality that may require more steps than the basic installation steps covered here.  If your theme does not work after following any provided instructions, please '''contact the theme author for help'''.
+
 
+
To add a new theme to your WordPress installation, follow these basic steps:
+
 
+
# Download the theme archive and extract the files it contains.  You may need to preserve the directory structure in the archive when extracting these files.  Follow the guidelines provided by your theme author.
+
# Using an [[FTP_Clients|FTP client]] to access your host web server, create a directory to contain your theme in the <tt>wp-content/themes</tt> directory provided by WordPress.  For example, a theme named '''Test''' should be in <tt>wp-content/themes/test</tt>.  Your theme may provide this directory as part of the archive.
+
# Upload the theme files to the new directory on your host server.
+
# Follow the [[#Selecting_the_Active_Theme|instructions below]] for selecting the new theme.
+
-->
+
 
+
<!--
+
====管理画面から新しいテーマを追加する <span id="Adding_New_Themes_using_cPanel"></span>====
+
If your host offers the [[Glossary#cPanel|cPanel]] control panel, and the theme files are in a .zip or .gz archive follow these instructions.  Note:  This assumes the theme you download is a compressed (zip) file and the files in the zip file are in their 'named' folder.
+
# Download the theme zip file to your local machine.
+
# In cPanel File Manager, navigate to your themes folder.  If you have WordPress installed in it's own folder called wordpress, you would navigate to "public_html/wordpress/wp-content/themes" and if WordPress is installed in your web-root folder you would navigate to "public_html/wp-content/themes".
+
# Once you've navigated to the themes folder in cPanel File Manager, click on Upload file(s) and upload that zip file you saved in Step 1.
+
#Once the zip file is uploaded, click on the zip file name in cPanel, then in the panel to the right, click on Extract File Contents, and that zip file will be uncompressed.
+
#Follow the [[#Selecting_the_Active_Theme|instructions below]] for selecting the new theme.
+
-->
+
 
+
==== 管理画面より新しいテーマを追加する <span id="Adding_New_Themes_using_the_Administration_Panel"></span>====
+
外観のサブメニューにある新規追加を使用すると、あなたのテーマディレクトリーにダウンロードする事ができます。
+
 
+
# WordPressにログインする。 [[管理画面]]に入ります。
+
# [[管理#外観_-_あなたのブログの見栄えを変える|外観]] を選択し 、[[管理画面#テーマ|テーマ]]を選択します。
+
# 新しいテーマを追加する。
+
# 使いたいテーマを見つけるにはテーマを検索か、特徴フィルターを使用します。
+
# テーマをプレビューするには、プレビューをクリックします。もしくは、テーマを自分のブログに適用するためにアップロードします。
+
# または、画面上部のテーマのアップロードのリンクを使用して、端末内にある以前ダウンロードしたテーマの zip形式で圧縮されたファイルを選択しインストールします。
+
 
+
=== 新しいテーマを追加する(FTP)===
+
 
+
WordPressのインストール時に新しいテーマを追加するには、次の基本手順に従います。:
+
 
+
# テーマアーカイブをダウンロードします。ファイルを抽出する際、アーカイブ内のディレクトリ構造を維持する必要があるかもしれません。テーマの作成者のガイドラインに従ってください。
+
# Using an FTP client to access your host web server, create a directory to save your Theme in the wp-content/themes directory provided by WordPress. For example, a Theme named Test should be in wp-content/themes/test. Your Theme may provide this directory as part of the archive.
+
# ホストサーバー上の新しいディレクトリにテーマファイルをアップロードします。
+
# 新しいテーマを選択するために、以下の手順に従ってください。
+
 
+
=== 有効化するテーマを選ぶ <span id="Selecting_the_Active_Theme"></span>===
+
使用するテーマの選び方:
+
 
+
# WordPressの [[Administration Panels|管理画面]]にログインします
+
#  [[Administration_Panels#Appearance_-_Change_the_Look_of_your_Blog|外観]]  >[[Administration_Panels#Themes|テーマ]]を選択します
+
# テーマパネルでは、興味のあるテーマのサムネイル画像をロールオーバーするとテーマのオプションを見ることができます。
+
# テーマ詳細をクリックすると、さらにテーマの詳細情報を見ることができます。
+
# ライブプレビューをクリックすると(ブログのコンテンツを利用した)ライブプレビューを見ることができます。
+
# テーマを有効化するには '''有効化''' ボタンをクリックします。
+
 
+
選択はすぐに反映されます。
+
 
+
'''注:''' テーマプレビューでなにも表示されなかった場合、さらに調べることなくそのままテーマを'''有効化してはいけません''' 。サイトが正常に表示されなくなる場合があります。
+
 
+
<!--
+
==Creating Themes==
+
 
+
If you are interested in creating your own theme for distribution, or learning more about the architecture of themes, please review the documentation regarding [[Theme Development]] and [[Designing Themes for Public_Release]].
+
 
+
===Theme Files===
+
 
+
The following are the files typically included within a Theme.
+
 
+
*[[Creating_an_Error_404_Page|404 Template]] = <tt>404.php</tt>
+
*Archive Template = <tt>archive.php</tt>
+
*[[Creating_an_Archive_Index|Archive Index Page]] = <tt>archives.php</tt>
+
*Comments Template = <tt>comments.php</tt>
+
*Footer Template = <tt>footer.php</tt>
+
*[[Designing Headers|Header Template]] = <tt>header.php</tt>
+
*Links = <tt>links.php</tt>
+
*Main Template = <tt>index.php</tt>
+
*[[Pages|Page Template]] = <tt>page.php</tt>
+
*Popup Comments Template = <tt>comments-popup.php</tt>
+
*Post Template = <tt>single.php</tt>
+
*Search Form = <tt>searchform.php</tt>
+
*[[Creating a Search Page|Search Template]] = <tt>search.php</tt>
+
*[[Customizing Your Sidebar|Sidebar Template]] = <tt>sidebar.php</tt>
+
*Stylesheet = <tt>style.css</tt>
+
 
+
== Moving from 1.2.x to 1.5 == <span id="Moving 1.2.x to 1.5"></span>
+
 
+
For details on upgrading WordPress and your WordPress Theme from v1.2 to 1.5, see: [[Upgrade_1.2_to_1.5|Upgrade 1.2 to 1.5]].
+
 
+
 
+
==Theme Tools and Other Resources==
+
 
+
These tools and resources will aid you in creating and/or enhancing themes.
+
 
+
===Layout===
+
 
+
* [[Blog Design and Layout]]
+
* [[Stepping Into Templates]]
+
* [[Customizing Your Sidebar]]
+
* [[Good Navigation Links]]
+
* [[Next and Previous Links]]
+
* [[Styling Lists with CSS]]
+
* [[Creating Horizontal Menus]]
+
* [[Dynamic Menu Highlighting]]
+
* [[FAQ Layout and Design|FAQ Layout and Design]]
+
* [http://www.redalt.com/Tools/builder.php WordPress Index Builder]
+
* [http://www.wateronlydries.com/?p=158 Photoshop Template for the WordPress Default Theme]
+
 
+
===Templates and Template Tags===
+
 
+
* [[Templates|Template Files]]
+
* [[Stepping Into Templates]]
+
* [[Stepping Into Template Tags]]
+
* [[Template Tags]]
+
* [[Theme Development|Developing WordPress Themes]]
+
* [[The Loop in Action]]
+
* [http://guff.szub.net/wordpress/template-tags/ Template Tag Layout in simple to read form]
+
* [http://boren.nu/archives/2004/11/10/anatomy-of-a-wordpress-theme/ Anatomy of a WordPress Theme]
+
* [http://boren.nu/archives/2004/10/16/templates-and-the-is-functions/ Templates and the is functions]
+
* [http://www.urbangiraffe.com/2005/04/12/themeguide1/1/ Dissection of a WordPress Theme]
+
 
+
===Tools and Resources===
+
 
+
* [[Designing Themes for Public Release]]
+
* [[Know Your Sources]]
+
* [[Validating a Website]]
+
* [[Finding Your CSS Styles]]
+
* [[CSS Fixing Browser Bugs]]
+
* [http://elasticdog.com/2004/11/wp-design-sandbox/ WordPress Design Sandbox Article]
+
* [http://www.cameraontheroad.com/index.php?p=594 Working On CSS and the WordPress Theme (using a sandbox)]
+
*[http://theundersigned.net/2006/05/from-xhtmlcss-to-wordpress/ From XHTML CSS to WordPress (making a Theme}]
+
 
+
===Colors, Graphics, and Fonts===
+
 
+
* [http://www.redalt.com/Tools/kubrickr.php Kubrickr - Changes Default Theme Header Images]
+
* [http://www.digitalwestex.com/gallery/index.php?cat=3 Header Graphics]
+
* [http://creativecommons.org/image/ Creative Commons Images]
+
* [http://www.imageafter.com/ Image * After - Free Stock Image Library]
+
* [http://www.sxc.hu/ Stock.xchng - Free Stock Image Library]
+
* [[Playing With Fonts]]
+
* [[Developing a Colour Scheme]]
+
* [http://colr.org Colr.org - For Finding Colors in an Image]
+
* [http://www.redalt.com/Tools/ilyc.php I Like Your Colors]
+
-->
+
 
+
{{NeedTrans}}
+
 
+
{{原文|Using Themes|30463}}
+
 
+
{{DEFAULTSORT:てえまのつかいかた}}
+
[[Category:初心者向けトピック]]
+
[[Category:デザインとレイアウト]]
+
[[Category:UI Link]]
+
[[Category:wp3.0]]
+
 
+
[[en:Using Themes]]
+

2020年8月14日 (金) 23:51時点における最新版

このページは https://ja.wordpress.org/support/article/using-themes/ へ移動しました。