Central Florida Runs

投稿タグ:

the_title_attribute(), WordPress 2.8 から、テーマの作者がより効果的に CSS で装飾できるようにする body 要素用の新テンプレートタグ body_class が加わりました。この関数は、HTML の body 要素（通常 header.php にある）に異なる class 属性を付与し、さらに任意の class を追加することもできます。, 実際の HTML 出力は次のようになります（WordPress 新規インストールで作られる 'About' ページの例）。. the_title(), sticky_class(), previous_image_link(),

WordPressにはwpdbというクラスが定義されています。このクラスには、データベースとのやりとりに使用される一連の関数が含まれています。その主な目的は、WordPressデータベースとのインターフェイスを提供することですが、他の適切なデータベースと通信するために使用することもできます。クラスのコードは ジャスティン・ヴィンセント氏 が作成し、管理している ezSQLクラスに概ね基づいています。 wordpressの投稿編集画面でテキストエディタを使っている場合、入力補助ボタン(quicktag：クイックタグ)をうまく使うと作業効率が大幅UPします。ボタンの追加や削除で投稿画面をカスタマイズする手順をまとめました。

Cocoonにて無料配布しています。, シンプルな無料Wordpressテーマを自作してみました。簡素好きな人におすすめ。 そもそもこのホームページを構成する各ページには、共通のパーツがあります。その一例として、ページの一番上のヘッダーや一番下のフッター、メインメニューそして左右のサイドバーなどがあります。, 以下の比較表のように、CMSの方がそうでない場合よりカスタマイズ作業の負担は軽減することが多いのではないでしょうか。, なお、CMSでない場合にも共通のパーツを利用する方法はいくつかあります。導入方法は複雑な場合もあり、また今回はWordPressについての記事のため、詳しい説明は省略しています。, WordPressの場合も同様です。そして共通のパーツの集合体と機能名を、「テーマ」と呼んでいます。そのため、このテーマの構造を理解してカスタマイズが確実にできれば、ホームページを円滑に運用可能です。, それではWordPressのカスタマイズ方法について、簡単な方法から説明していきましょう。なお、いきなり完全オリジナルのテーマの自作は困難です。少しずつ、わかりやすい方法から試してみることをおすすめします。 確かにWordPressのカスタマイズは、たいへん難しい印象があります。ところが、簡単なことから順次着手していけば、意外と手の届く範囲にあるとお気づきになると思います。CSSやPHPの知識を完璧にマスターしてから、WordPressに取りかかるのが理想です。ただ時間がかかるため、あえて近道をとることも選択肢としてあるのではないでしょうか。 previous_post_link(), WordPressでブログを始めたばかりの方で、「タグ」をどう使えば良いかいまいち要領が掴めない人も多いのではないでしょうか。 ここでは、 初心者を対象にWordPressの「タグ」の使い方と設定方法について説明 していきます。 WordPressには、投稿を分類するために「タグ」を設定することができます。同じような役割を持つものに「カテゴリー」があります。ここでは、タグとカテゴリーの違いについて紹介します。 タグとカテゴリーとの違いは？ タグもカテゴリーも、WordPressで作成した投稿をグループ分けする … WordPress のファイルには、便利な PHP 関数がたくさん定義されています。テンプレートタグとして知られる一部の関数は、特に WordPress テーマ用に定義されているものです。また、主にプラグインの開発に用いるアクションフック・フィルターフックに関する関数（プラグイン API）もあります。 WordPressの配布テーマでオリジナルデザインのサイトを作りたい人必見！デザインを変更するコードをコピペで使えるようご紹介！CSSが分からない、PHPって何？そんな方でもできるカスタマイズ方法をわかりやすくお教えします。 previous_posts_link(), WordPressはHTMLやCSSの詳しい知識がなくともインストールさえしてしまえばブログが運営できてしまいます。しかし少しオリジナリティーを出したくなった時、HTMLとCSSの知識がなくてはカスタマイズはできません。, わたしはWordPressの初心者の方からカスタマイズの問い合わせをいただきますが、その方の多くはそもそもHTMLやCSSを理解されていない方が大半です。そんなHTMLやCSSが何が何だかわからない超超初心者向けにカスタマイズの記事を書いていきたいと思います。, 今回はホントに初心者の方へHTMLとCSSの概要と記述方法をざっくりと説明していきます。, WordPressを理解するにはまずHTMLとCSSが何たるかを知っている必要があります。HTML、CSSを理解することができればWordPressを理解するのが容易になるでしょう。, ブラウザ上で右クリックし[ソースを表示（ブラウザによって異なる）]を開いてみてください。文字列が並びますがこれがHTMLのソースになります。HTMLはWEBサイトのページの文書構造、つまり段落や見出しなどを明確に分けて文書の意味を正確に分類したり整理したり記述します。, この記事の上の[HTMLとCSS]は見出しで今読んでいただいているこの文は文章・段落です。このように「ここは見出しですよ」「ここは文章・段落ですよ」と文書構造を記述してWebページを作成していくものがHTMLなのです。, cssは一般的にスタイルシートと呼ばれているHTMLの表示形式を記述していくものになります。表示形式とは、見た目の部分で文字の色や大きさ、背景色やレイアウトの位置など本文とは関係ないけれど見やすくするための装飾部分を制御するものになります。, WordPress は、HTMLとCSS、PHP、JavaScriptなどで構成されたWebアプリケーションです。端折りすぎてちょっと違うかもしれませんがイメージ的にはこんな感じです。, WordPressを理解するのにHTMLやCSSを理解して、PHPを勉強して…。などと難しいことは考えなくても大丈夫です。それぞれのプログラム言語の記述のルールを憶える程度でも、グッとWordPressのカスタマイズの幅が広がります。, JavaScriptは動きのある画面を構成したり、計算や情報検索などをWeb上で行うプログラム言語のことで、PHPはサーバー側で動作します。, セレクタというのはスタイルを適用する対象を示し、属性というのは後述するidセレクタやclassセレクタがそれにあたります。, またスタイルの内容が同じだったらいセレクタを,[コンマ]で複数設置することもできます。, コメントアウトとはCSSファイル内で自分自身がわかりやすいようにちょっとしたメモを入力したりする際に使用します。以下でご紹介しているのはCSSのコメントアウトです。HTML、PHP等はまた別の書き方になりますのでご注意ください。, 外部CSSファイルというのはWordPressのテーマではstyle.cssというファイルが用意されています。そのファイルにスタイルを書き込んでいきます。テーマにあるheader.phpの＜head＞内に外部CSSファイルを呼び出すコードが記述されているためstyle.cssをWordPressに適応させているんです。※テーマによっては若干異なる場合あり。, WordPressの既存のテーマをカスタマイズするような場合は特に自分で設置するようなことをしなくてもstyle.cssを修正していくといいでしょう。, WordPressではheader.phpのhead内に以下の例のように記述するとスタイルを適応することができます。WordPressの場合前ページにこのように記述されてしまいますので特に必要性がなければstyle.cssに書き込む方法がいいでしょう。, WordPressでは記事を書くときに使う場面が多いかもしれません。いつも黒にしているh2の見出しを一カ所だけ文字色を赤にしたいという場合などに使ったりします。, セレクタとはスタイルを適用する対象のことを言います。セレクタの種類は多数存在しますが最低でも頭に入れておきたいものは以下になります。, セレクタとしてタグを指定しスタイルを適用させます。タグとはh2やh3、pやimgなどのHTMLで文書構造を作っているしるしの事です。タグは種類は多数存在しますが<●●>で始まり＜/●●＞で終わるものがほとんどです（hrなど例外あり）, cssの書き方を説明した際に属性というものがありました。idセレクタは特定のid属性を持ったタグに対してスタイルを適用させるものです。, idとほとんど同じで、classセレクタは特定のclass属性を持ったタグに対してスタイルを適用させるものです。, idは1ページに1つしか使用しません。CSSでスタイルを指定する際には#(ハッシュ）を使用します。classは1ページで複数回利用することができます。CSSでスタイルを指定する際には.

本格ブログ運営するならWordPress投稿エディタのカスタマイズは必須。、文字装飾の仕組みからCSSの追加方法、設定の注意点などを図例多く丁寧解説。サンプルはカラーマーカー風の下線を引くCSS。設定はコピペオンリーで難しくないのに便利効果は高く、WordPressカスタマイズ第一歩に最適 … wp_link_pages(), 最新英語版： WordPress Codex » Function Reference/body class （最新版との差分）, Add CSS Class to body when Sidebar is Present, WordPress Codex » Function Reference/body class, http://wpdocs.osdn.jp/wiki/index.php?title=テンプレートタグ/body_class&oldid=12390, page-template page-template-(template file name). From: Add CSS Class to body when Sidebar is Present, wp-content/themes/default/header.php を参照。, body_class() は wp-includes/post-template.php にあります。. WordPressのテーマスタイルシートでは、以下のような適切なスタイルを追加します。: 複数のクラスを追加するには、テンプレートタグのパラメータを追加することができます。. body_class(), 文字にマーカーで引いたような線を重ねられるスタイルです。, では、このCSSを利用できるようにするため、まずは使用中のWordPressテーマの「style.css」に追加のCSSを貼り付けましょう。, 「style.css」ってなに？どこにあるの？という方でも大丈夫。「style.css」はWordPressテーマに必ず含まれている、サイト（ブログ）の見た目を設定しているファイルで、管理画面からアクセスできます。, 子テーマ？なにそれ？という方、危険です。特にWordPressに最初から入っているテーマをご利用の方、もしくは「外観＞テーマ＞新規追加」の操作をしてテーマをインストールした方、そのままだとCSSを設定しても、テーマをアップデートした瞬間すべて消えてしまいます。, WordPressのテーマはWordPress本体と同じように、頻繁にアップデートされます。これはセキュリティ面でも大切なことなので、アップデートしないわけにはいきません。そしてテーマがアップデートされると、styel.cssに加えた変更は、すべて新しいデータに上書きされます。努力が水の泡になるわけです。, そのためにWordPressではテーマをカスタマイズする際には、子テーマを使用するという手法が推奨されています。子テーマの概念についてはこちらの記事で詳しく説明してあります。「WordPress　子テーマ」で検索しても有益な情報が沢山ありますので、チェックして子テーマを作成しましょう。, 子テーマの作成が完了したら、WordPress管理画面の左柱より、「外観」から「テーマの編集」へと移動します。, 右側に使用中のテーマ内のファイルがずらりと並びますので、「style.css」を探しましょう。テーマによってはファイル数が多いのですが、アルファベット順に並んでいるので下から探すと見つかりやすいです。, この時、表示されているファイルが本当に「style.css」か、ちゃんと上部を確認しましょう。（HTMLやWordPressに慣れてない方ほど特に！！）違うファイルを弄るとWordPressの表示が狂います。, 次に「style.css」の末尾に上記のCSSを足すのですが、その前に！！ WordPressで記事を作成中、もうちょっとここを強調したいな、と思うことが多々ありますよね。太字やカラー文字など、見た目もリズムよく構成されている記事は、大事なポイントがわかりやすく、見ていて疲れません。, WordPressに元から用意されている太字や引用以外を用いるには、自前でCSSを用意します。具体的には使用中のテーマにCSSを追加し、エディタの「テキスト」モードにて、HTMLタグで文字をはさみます。, こちらの「いつも隣にITのお仕事」のWordPressエディタには、こうしたCSSが手軽に利用できるよう、豊富な文字装飾ボタンが実装されています。, 「赤アンダーライン」や「上矢印吹き出し」など、わかりやすい名称のボタンが並んでいますね。, このように、エディタに手軽に自作のボタンを追加するには、「AddQuicktag」というプラグインを利用します。導入自体はとても簡単ですし、一度設定してしまえば、後の記事作成がとっても便利になります。, 今回はWordPress初心者様向けに、WordPressにて文字装飾はどのような仕組みで設定されているかと、投稿エディタボタンに新しい文字装飾ボタンを追加する手順までを、前編・後編２記事に分け解説していこうと思います。, ● 前編　＝　文字装飾に関するWordPressの基礎知識 $classes[] = 'categoryid-'.$category->cat_ID; add_filter('body_class', 'add_category_id_classes_to_body_classes'); 上記コードはあくまで一例です。使用しているテーマによって、割り振られているIDやclassが違うので、スタイルはテーマに合わせて書く必要があります。, function add_category_slug_classes_to_body_classes($classes) {. To add the following to the WordPress Theme functions.php file, changing my_class_names and class-name to meet your needs: 単一の投稿ページビューとテンプレートファイルにカテゴリークラスを追加するには、functions.phpに以下を追加します。, You can add additional body classes by filtering the body_class function, but what if you want to add a class only when the sidebar.php file is being shown? 今弄っているのは、稼働中のWordPress設定ファイルです。何かを間違うと、WordPressの表示が崩れます。必ずバックアップを取りましょう。, やり方は簡単です。中央のエディタの中身をまるごとコピーして、メモ帳などに貼り付け、デスクトップに適当な名前で保存しておきましょう。, バックアップを取ったら、いよいよstyle.cssに追加のCSSを貼り付けます。 HTMLを勉強し始めると、div classというコードをよく見ませんか？今回は、div classって何なの？という人のために具体例を使って丁寧に解説します。また、よくある疑問とし挙げられる、div classとdiv idの違いも解説します。 使用中のWordPressテーマの「style.css」に追加のCSSを貼り付けましょう, 特にWordPressに最初から入っているテーマをご利用の方、もしくは「外観＞テーマ＞新規追加」の操作をしてテーマをインストールした方, 中央のエディタの中身をまるごとコピーして、メモ帳などに貼り付け、デスクトップに適当な名前で保存しておきましょう。, 詳解! the_meta(), posts_nav_link(), GoogleAppsScript完全入門 ~GoogleApps & G Suiteの最新プログラミングガイド~, VBAやGoogle Apps Scriptのツール開発と研修をセットで依頼される企業が増えている理由. 注意点として、データのバックアップは必須です。作業中に万一動かなくなったり、大切なデータが消えて困ったりしないように備えましょう。, まずは、WordPressの管理画面上で手軽にできるカスタマイズ方法から解説したいと思います。, 手始めに、管理画面上でできるカスタマイズの内容を、以下のように整理しました。これだけでも、ホームページ公開に必要でかつ基本的な作業はできます。, 画面の指示に従って設定を進めていけば、スムーズに完了すると思います。この作業に慣れ、WordPressの構造について大まかに把握をしてみてはいかがでしょうか。, このように管理画面の「外観」メニューだけでもかなりカスタマイズできそうですが、残念ながら変更可能な範囲は限定されています。, ページ構成や表示方法などレイアウトを独自のものにする場合は、CSSファイルやPHPファイルを操作することになります。詳細は次の章で解説していきます。, この章ではWordPress を構成するCSSとPHPの主要ファイルの役割を解説し、カスタマイズに必要な知識を整理しています。, これまで出てきた共通のパーツは、それぞれPHPファイルになって分散しています。そして、これらのファイルを束ねるPHPファイルも別に用意されています。例えば、トップページ専用のPHPファイルには、ヘッダーやフッターそしてコンテンツなどの各PHPファイルの内容を呼び出して、束ねる内容が記述されています。 Here's a working example you can post in your themes functions.php file to add a sidebar class to the output of body_class. post_class(), WordPressでは、ページごとに個別のCSSスタイルを適用できるようにbodyタグのclass（以下、ボディークラス）は、以下のように出力されています。, 例えば上記タグの場合だと、投稿IDが30847の投稿ページのみに適用するCSSを手軽に書くことができます。その他にも、「投稿ページ（single）」や、「ログインユーザーが表示しているとき（logged-in）」のみに適用するCSSが書けるように情報が含まれています。, けれど、Wordpressデフォルトの機能では、特定のカテゴリ情報は、ボディークラスには含まれていません。, なので、今回は「BODYタグのクラスにカテゴリー情報を含めるカスタマイズ」を行って、カテゴリごとに自由にCSSを設定できるようにする方法を紹介したいと思います。, bodyタグのclassにカテゴリのID情報を含めるには、functions.php等に以下のように記入します。, functions.phpに上記のように書くことによって、ボディータグは以下のように出力されます。, 上記の例では「categoryid-6 categoryid-3 categoryid-4」という現在表示している投稿が属しているカテゴリの「カテゴリIDつきのクラス名」が挿入されていることが分かります。, あとは、「特定のカテゴリのみ1カラム表示」みたいな表示にしたいときは、以下のように書くことで実現することができます。, ボディークラスに「categoryid-6」のようにIDつきのクラス名を挿入した場合、利用するには、「カテゴリのID」を知る必要があります。というのも、「使用したいカテゴリのIDが何番なのか」がわからないと思ったように設定できないからです。, カテゴリのIDを知るには、Wordpress管理画面から「投稿 → カテゴリ」を選択してください。, すると、ブラウザのアドレスバーに表示されるURLのパラメーターに「&tag_ID=[カテゴリID]」のように番号が表示されます。, bodyタグのclassにカテゴリのスラッグ情報を含めるには、functions.php等に以下のように記入します。, 上記コードは、以下のようなテストカテゴリ（スラッグ：test）に属しているため、「test」というクラス名が出力されています。, あとは、先程のように今度はスラッグクラス名をCSSセレクタとして利用してスタイルを指定します。, ただ、スラッグを利用した方法だと、スラッグが日本語だった場合は、日本語がエンコードされるのでボディータグには以下のように出力されます。, CSSセレクタには、日本語や、絵文字は使用できます。けれど、試してみたところ「%e6%97%a5…」のような%記号を使用したCSSセレクタは利用できないようです。, なので、「スラッグを用いた方法」を利用する場合は、必ず「半角英数字と-（ハイホン）_（アンダーバー）」を用いたカテゴリのスラッグを設定する必要があります。, こんな感じで、ボディークラスにカテゴリ情報を付加することで、カテゴリごとに違ったCSSを適用させることができます。, ただ、「カテゴリIDを付加する方法」ではIDを調べる必要がありますし、「カテゴリスラッグを付加する方法ではスラッグ」を半角英数字で設定する必要があるなど、一長一短な部分はあります。, 個人的には、「カテゴリIDを付加する方法」の方が、スラッグの内容を気にする必要もなく、コピペ一発で済むのでおすすめかなと思います。, というわけで「カテゴリごとに違ったCSSを適用したい」なんて場合は、結構簡単に実装できるかと思います。, Simplicityテーマを利用している場合は、v2.2.8以降は、このカスタマイズが施してあるので、カスタマイズ不要です。というかカスタマイズすると、関数名が重複してエラーが出ると思います。, Pickup! これをテキストモードにすると、真ん中図のようにテストというタグで文字が挟まれた状態になっています。 WordPress（ワードプレス）で【タグを設定する方法】を初心者向けに解説した記事です。使い慣れていない人でもわかりやすいように、8枚の画像を使って紹介。カテゴリーとの違いも解説しているので、基礎をおさえておきましょう。 無料で使える会計ソフト「MFクラウド確定申告」は零細個人事業主にとっては神ツールなのではないか. the_title_rss(), © 2012-2020 ShufuLife-主婦ライフ- All rights reserved. next_image_link(),