月別アーカイブ: 2014年7月

子テーマのCSSが反映されないとき

失敗例

WordPressでホームページ風な固定ページを作るべく、ローカル環境で動作を確認して本番環境に移植しても、なかなか子テーマのCSSが反映されず悩みました。失敗例と解決法をメモに残します。

解決の一例

edittheme無題

特定の固定ページではサイドバーを使わず全画面を5ブロックに分け、カスタムフィールドを用いて外部CSSを読み込む方法を採りました。XAMPP環境で簡単に実現できましたが、移植がうまくいきません。手順書を確認すれどまったく改善されません。試行錯誤では不具合箇所を絞りきれないので、調査したところ、西沢直木のWebサイト、CSSの変更が反映されないときのチェックポイントが参考になり、ずいぶん助かりました。感謝申し上げます。

local-css

その記事には表示中の画面で実際に読み込まれているCSSの調べ方が解説されていました。「ページのソースを表示」させると個別のCSS(nextgeneration.css)が正しく割り当てられており、カスタムフィールドによるリンク方法には問題ないことがわかります。上図のリンクアドレスをクリックすれば、はっきりします。ローカル環境の格納先には問題なくジャンプしました。

action-css

本番環境の上例でも個別CSSはねらいどおり割り付けられているが、クリックしてもジャンプしません。このことから個別style.cssのインクルード先が正しくないことが判りました。アドレスに.jpが欠落していたことが原因でした。

感想

新しいことを進めるときは様々な問題点が噴出します。簡単なことは試行錯誤で解決しますが、体系づけられた究明法を確立しておかないと体力が消耗することを経験しました。

地図を目次にするウィジェットの作り方

概要

多くの情報の中から欲しいものを素早く入手するには、事前に仕掛けを作っておかなければなりません。病院のカルテを氏名で50音に整理し、あ行、か行…と10分割するだけでも検索が楽になります。

本などでも、部、章、節、項と階層化して目次を作り、ページと対応づけをすることはオーソドックスな手法です。ここでは地図を目次にするページの作り方を示します。

今回の仕様

各都道府県のジャンプアドレスは都道府県の地域ニュースにしています。このリンク先は最後にローマ字で県名が付くという約束事になっているので参照させてもらっていますが、実際には所望するリンク先のアドレスを指定します。

例に使ったサイトはサイドバーがないので、全画面表示でありメイン記事と県別目次を同一画面上に併用表示はできませんが、次の県の情報を表示するには前画面に戻ればサイドバーに全国地図が現れるので次の県をクリックします。

リンク先をここだけの耳よりな話のように同一サイトの特定箇所にすれば、地図の目次は常にサイドバーに表示されています。地図から次々に県の情報を表示させる場合に便利な機能です。

作り方は少し複雑です。以下に順を追って説明します。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 作り方はここから ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

作り方の手順

➊準備

目次をウィジェットに表示して、他とのかかわり、全体と個の関連を理解しやすいように表現するにはWordPressのカスタマイズから始めます。WordPressのカスタマイズ実践編により準備します。

➋地図データの入手

無料地図素材.netからjapan06.gifと制御コードをダウンロードします。デザイン的にはhttp://www.abysse.co.jp/のmap14-2.jpgを好みますが、japan06.gifには制御コードが付いているのでこちらを選びました。説明のため、ダウンロードした制御コード(テキストイメージ)のファイル名をjapan06.TXTとします。

ここで1枚の画像に複数リンクを貼る技術を習得しなければなりません。クリッカブルマップ、HTML Import2など様々なリポートがリリースされていますが、ここで入手した2つのファイルだけでもWordPressで立派に動作しました。無料地図素材.net様に感謝申し上げます。

japan06

制御コード(japan06.txt)を以下に示します。

japan06-gif

➌地図と制御コードを編集

上の図を修正します。ここだけの耳よりな話ボタンを追加します。このボタンデータを作成するにはフリーアプリC-MAP.exeが便利ですが、佐賀県、石川県、北海道、青森県のデータから作成する方が近道です。ペイントで関連する県から位置決めして文字を入れて完成です。新しくできた画像ファイル名をjapan06X.gifとします。

japan06X

➍地図画像をロード

japan06X.gifをアップロードしURLアドレスを確保します。

➎リンク設定と制御コード作成

japan06.TXTのリンク先(http://www.yahoo.co.jp)を都道府県の地域ニュース(http://www.47news.jp/localnews/)に一律変更します。/の後に県名をnagasakiのように追加すれば、県のニュース先のアドレスになります。

ここだけの耳よりな話ボタンの制御コードを長崎県データの前に挿入しjapan06.TXTを編集します。ボタンは四角形であり、佐賀県のデータが参考になります。

➏クリッカブルマップに組込む

さらにjapan06.TXTテキストファイルの先頭にアップロードしたjapan06X.gifの情報を加えます。作成には以下の2画像が参考になります。

jump-3

上の図からクリッカブルマップのareaタグにマッチするように修正を加えたのが下図です。ファイル名を修整しここだけの耳よりな話ボタン情報を加えています。

jump-4

➐ウィジェット記事を登録

ダッシュボード-Content Blocks-ADD Content Blockと進み、タイトルと記事を作成します。ガイドメッセージの下に3項でアップロードした画像を配置:なし、フルサイズ-450X300で挿入します。次に画面モードをHTMLにしてjapan06.txtのテキストを挿入します。最後は公開(更新)をクリックします。ウィジェットの画面はメインエリアよりも小さいですが、img内のwidth、hightの値を変更しないことがミソです。

自分で作成した47都道府県のページにリンクする場合は、areaタグ内のhref URLアドレスを変更します。同一ページ、同一ブログ、他のサイトへリンクできます。また、ページの途中にジャンプさせる場合は、あらかじめアンカーを作っておきます。

➑ウィジェットを条件付き表示

ウィジェットはすべての記事で、サイドに表示されます。目次は対象となるページの時だけに表示されるように条件を付けます。ダッシュボード-TS Custom Widgetsと進んで地図を目次にする方法地図を目次にするウィジェットの作り方の専用ウィジェットであることを関連づけます。WordPressのカスタマイズ実践編の「サイドバーの記事掲載を条件付き」、「ウィジェットエリアに目次を作成」を参照ください。

 まとめ

1画像に48(47+1)個のリンクを貼って地図を目次にするウィジェットの作り方をひととおり眺めてまいりました。技術が多岐にわたり、複雑に感じるかもしれません。そのような場合は四国4県だけの目次を作るなど、ハードルを下げてみるのもよいでしょう。

➐ウィジェット記事を登録ではウィジェットに記事を載せる方法を述べましたが、メインエリアで動作を確認してからウィジェットに持っていく方法がやさしいかも知れません。

ウィジェットに移動したとき、画像が表示されるのにクリックが利かない場合は、画面サイズが小さくなったのに、レスポンシブ機能が働いていないことが原因になっていることが多いです。jquery.jsやプラグインツールについて確認するとよいでしょう。

47県は数が多いので、文字列を一律に他の文字列に置き換える機能のあるテキストエディタがあると効率的でしょう。

 感想

地図から指定した箇所の情報を引き出すウィジェットページの作り方をマスターできました。WP Pic Taggerが使えなくなってがっかりしましたが無料地図素材.net様の日本地図と制御コードが見つかり、それからはスラスラ進展しました。

リンクを貼る画像エリアは閉じた多角形、円などであればどんな形にも対応できます。おかげで引き出しの中に宝物が1つ増えました。

47都道府県の魅力

都道府県の魅力を集めたページの窓口です。右ウィジェットの都道府県をクリックして起動します。 lakehatori 各都道府県のジャンプアドレスは都道府県の地域ニュースにしてあります。地図上のリンク先を変更することにより様々な使い方に発展するでしょう。作成方法は地図を目次にするウィジェットの作り方をご覧ください。

ここだけの耳よりな話

yukiguni江戸時代に300近くもあった藩から、明治初期にいきなり47都道府県が誕生に至ったのでないことは周知の事実です。廃藩置県は1871年で、1使3府302県から始まりすぐ1使3府72県になり、45,46県にでき上がったのは1888年頃です。 奈良県香川県は少し遅れて、沖縄県は施政権の返還で他とはかなり遅い誕生です。東京都の名前も歴史は新しいです。

川端康成、雪国の冒頭の言葉は、上野国と越後国の境を言っており、「コッキョウ」と発音しても間違いではないでしょう。文学好きな方々の論争に期待しましょう。

yukiguni2

WordPressのカスタマイズ実践編

この記事の目的

WordpressLogo当サイトはWordPressによって記述されています。WordPressはphpで開発されたオープンソースのブログソフトウェアであり2003年5月末にリリースされて以来、世界で最も多くの人々に利用し続けられているブログソフトウェアと言えるでしょう。

この記事で述べていることを実践することにより、階層化された情報の表現方法が可能になり、47都道府県地図から指定された県の詳細情報が得られるようなサイトを構築できるようになります。そのための基礎的なカスタマイズについて記述されています。 ある程度、解明できた階層化表現方法を使ってWordPressのカスタマイズを整理し、合わせてその表現方法を浮き彫りにしていきます。

wordpress-logo-cloud1WordPressのカスタマイズ方法が公開・ドキュメント化されています。カスタマイズといえばテーマに関する記述が多いのですが、ここでは実践的なカスタマイズを取りあげます。 当記事は長くなることもあり、微に細に触れることは避け、詳細なことは他の記事を参照していただきます。

参照記事がなく先陣を切る内容についてはこの限りではありません。 先頭から順を追って読みますが離れた箇所の記述を読む場合は、右下のScroll to Topをクリックして先頭に戻り、サイドバー(ウィジェット)の目次のタイトルを選択してください。

子テーマを採用

ウェブサイトを表現するWordPressはソースが公開されているので安心感があるのですが、仕様はすべてに一律に有効です。ある記事だけ表現フォ-ムを変えたい、広告を表示させたくないなどと特別仕様で動作させたいことがあります。 NewThemeWordpressTree

特別な仕様にするためchildフォルダに示す4ファイルを変更することが多いです。 この場合、インストール時に収納されたファイルを直接、変更してもかまいませんが、WordPressがバージョンアップされても新仕様が引き継がれるように、子テーマを作って特別な仕様を追加するように推奨されています。

子テーマとはカスタマイズしたい親テーマ(Twenty Thirteenなど)の普遍的な機能に対し自分用に定義された集まりであり、親テーマに上書きするものです。 WordPressCustomize今回は、バージョンTwenty Thirteenを使っていますが、子テーマを採用しないでバージョンアップした場合は、改訂・追加した機能は反映されません。

自分流に定義されるファイルは一つのフォルダ(例ではchild)にまとめられ、親テーマと同一階層に置かれます。このように前、現、次世代という同じ階層であるためバージョンアップに対応することが可能になります。

子テーマに関する項は
①【重要】WordPressテンプレートのカスタマイズ前に・・・子テーマをつくってのカスタマイズ方法 -CSS篇-
②【注意】子テーマ作成でトラブルが起きたら…子テーマをつくってのカスタマイズ方法-functoins.php篇-
WordPressでページごとに別のスタイル(外部CSS)を適用させる方法
を参考にしてまとめられています。先駆者の皆様、わかりやすい解説をありがとうございます。

カスタマイズの具体例

WordPress3Costomaizeこのたび、TwentyThirteenのWordPressをカスタマイズした内容をファイル単位に示します。カスタマイズするには以下に示したファイルで指定します。

先に述べましたが本家本元のファイルを修正しても問題ありませんが、将来のために子テーマとしてまとめたフォルダ(今回はchild)に必要な機能のみを定義した同名のファイルを用意します。

このように設定しておけば、WordPressの処理系がまず、本元のファイルを読み込んだ後に子テーマファイルを読み、追加してくれます。同じ関数名ならば上書きされ、新規関数名ならば追加されます。 以下にファイル内容を画像イメージで明示し、追加した機能を解説します。山の頂上を極めるのに複数の道があるようにあくまでも一つの方法です。

➊functions.php

functions

スライドショーは一連の表示が終了すると元に戻り再び繰り返し表示されるようにloop機能がオンに設定されていますが、function.phpを改造することによって特定のスライダーID(例では319、370、390)においては1回で終了するようにカスタマイズしています。

もう一つのinclude_custom_css関数は、インストールで収納されているstyle.cssを超越して、指定されたページでは別のスタイルを適用させる機能を追加しています。複数cssを取り込めるようにするこの関数をfunctions.phpに定義します。するとカスタムフィールドで取り込みたいcssファイルを絶対パスで指定できるようになります。

➋single.php

single

single.phpは投稿ページを管理するファイルです。オリジナルファイルは赤枠行が<?php get_sidebar();?>になっています。実際、<?>は半角です。指定されたカテゴリーのときだけウィジェットを表示するように改造したのが上例です。

その後、ウィジェット記事の表示に条件を設定できるCustom Widgetsプラグインが見つかりましたので、single.phpは削除されました。 上記例は、カテゴリー名が’soft’であるときのみサイドバーが表示されるような設定ですが、月~金曜日だけ表示されるようなサイドバーの作成に参考になるでしょう。

➌style.css

style style.cssはWeb

サイトの表示方法を決定しています。#site-title aでタイトルの文字色を変更しています。#import uri(“../twentythirteen/stye.css”);は指定したファイルを取り込むことを指定しています。この例ではタイトルの文字色以外は標準のstye.cssに依存します。

➍jquery.js

jquery-js jquery.jsはクリッカブルマップをサイズ可変な画像に対応するように、即ちレスポンシブデザインをサポートするために定義されました。具体的な効能は別稿に記述されます。

サイドバーの記事掲載を支援

サイドバーにはテキストウィジェットで記事を載せることができますが、改行など編集しにくいことが起きます。テキストウィジェットの拡大版ともいえるプラグインツールCustom Post Widgetを使うと、自由度の高いテキスト編集が可能になります。インストール方法と使い方は、『ゼロからはじめる WordPress』が参考になります。

custom-post-widget-01 ウィジェット記事といってもメイン

エリアの投稿記事と変わりなくリンクを貼ることもできます。今回はここにメイン記事の目次を作ってパワーポイントのような動作をするウィジェット記事の作り方を後に示します。

サイドバーの記事掲載を条件付

ウィジェットはすべてのページに表示されます。カレンダーなどはそれで問題ありませんが、メイン記事と連動する上記のようなウィジェット記事は表示条件を設定しないと見苦しくなります。 条件付きで特定のウィジェットを表示・非表示にしてくれるプラグイン『Custom Widgets』を使います。

使い方は『条件付きで特定のウィジェットを表示・非表示させる方法!Wrodpressプラグイン「Custom widgets」の使い方』、『指定した条件でウィジェットを表示させるWordPressプラグイン→Custom widgets』、『ページ毎(サイドメニュー)に好きな項目だけ表示』を参考にさせていただきました。

CustomWidgets

今回は、特定の投稿記事でのみ表示されるように設定しました。条件設定は多岐にわたり、様々なケースに対応するには入念な検討が必要のようです。

クリッカブルマップを使う

一つの画像に複数のリンクを貼るにはクリッカブルマップという手法を採用します。四国地方の地図や簡略化した下図の該当箇所をクリックして県別の詳細な情報が得られるようなページを作成できます。

四国名所

イメージマップの設定例を以下に示します。shikoku

サイズ可レスポンシブImage Map

縮小化通常のメインエリアに表示される投稿記事が完成されている場合、その記事をウィジェットに表示させても動作しません。また、上記例ではサイズ600X450の画像からクリックされた県のURLにジャンプするように作成してありますが、最大化から縮小に変えて地図をクリックした場合も、期待した動作にはならないでしょう。

このような場合においても、変動した画面サイズに対応可能にするプラグイン『jQuery RWD Image Maps』があります。 画像のサイズの変動に対応するための準備について、『クリッカブルマップ(イメージマップ)で1枚の画像に複数リンクを設定する』を参考にさせていただきました。その後に、カスタマイズの具体例で説明した➍jquery.jsを用意します。

ウィジェットエリアに目次を作成

以上で前準備が完了しました。ここからはすべてが整っている前提で話を進めてまいります。本文の記事がおおかたの完成時に実施します。では当記事「WordPressのカスタマイズ実践編」目次をウィジェットに作成する手順を示します。 ①ダッシュボード-外観-ウィジェット-副ウィジェットエリアを開き、Content Blockを副ウィジェットエリアの最上位にコピーします。

ContentBlocks1

Show Post Titleの左ボタンにチェックを入れ、保存をクリックします。 ②ダッシュボード-Content Blocks-Add Content Blockと進み、Add New Content Block画面を表示します。

ContentBlocks2

上図のように、タイトルと本文を作成します。テキストウィジェットの中でリンクを貼る方法はメイン記事の作り方にまったく同一です。前もってアンカー名をこの記事に作っておきます。目次はウィジェットに作られるので他ページになり『他ページ中の特定の場所にジャンプさせる』記事を参考にして以下のように作成しました。最後に公開(更新)をクリックして終了です。

link13

③Custom Widgetsが正しくインストール、有効化されていればダッシュボードのメニュー欄に歯車から始まるTS Custom widgetsが現れていますのでクリックします。 ④ダッシュボード-TS Custom widgets-副ウィジェットエリア-Content Block-Post(Edit)と進み、表示するページにチェックを入れ、Add selected postsをクリックし、左上欄にそのページが選択されたことを確認します。以下は2ページを選択した例です。

CustomWidgets1

⑤再び、TS Custom widgets-副ウィジェットエリア-Content Blockを指定すると以下の画面のように2ページが選択されたことが確認できます。

CustomWidgets2

⑥Content Blockが複数ある場合、即ち特別に制御したいウィジェットが複数存在する場合は、①の作業でContent Blockを副ウィジェットエリアに複数用意します。

CustomWidgets3

まとめ

メイン記事の目次をウィジェットに表示する例を示しながら、WordPressのカスタマイズについて述べました。長くなりましたが一つ一つは複雑ではありませんので少しずつ確認されるとよいでしょう。

かゆいところに手が届くには、ちょっとした努力が必要です。その一つがカスタマイズですがお役に立てれば幸いです。

47都道府県の情報

予告になりますが、上記のようなウィジェットの効果的な使い方である『47都道府県の情報』は、別稿にて発表されます。 xamppのローカル環境で動作確認をしてから公開手続きをしましたが、画像が多くなり手間取りました。次回からはスムースに進むことでしょう。

当ページはトップページから、サイトマップ、最近の投稿、カレンダーから表示されますが、最後の方法で起動した場合はなぜかウィジェット目次が表示されません。調査中です。

カレンダーの日付をクリックした場合は、あたかも本文記事にジャンプしたかのようですが、同一日の記事が複数あるかも知れずまだ確定されていないことが判りました。2つの記事がある場合、2つとも仮表示されます。 読みたい記事名のタイトルをクリックすると待望のウィジェット目次が表示されます。WordPress仕様上、記事が1つしかない場合は自動決定になって欲しいものです(2014-07-05追記)。