カテゴリ

    Category Order could not understand your category HTML. Please do the following:

    • Disable all plugins except for category order to see if some other plugin is causing the problem. If the problem goes away, re-enable each plugin until you find the incompatible one.
    • Try switching to a different theme, like the WordPress default theme.

    Once you have tried the above steps, email david@coppit.org with the results of these debugging steps. Also include the following information:

    Original HTML:
    <li class="cat-item cat-item-5"><a href="https://www.itpk.jp/?cat=5" title="ITPKからのお知らせ記事です。">お知らせ</a> (3)
    </li>
    <li class="cat-item cat-item-28"><a href="https://www.itpk.jp/?cat=28" title="ITPK のメンバーが、どんなことを考えて仕事をしているのか、を知ってもらえれば幸いです。
    ">こんなこと考えてます</a> (3)
    </li>
    <li class="cat-item cat-item-29"><a href="https://www.itpk.jp/?cat=29" >フリー画像</a> (5)
    </li>
    <li class="cat-item cat-item-6"><a href="https://www.itpk.jp/?cat=6" title="社内向けの研修資料を、業務に支障の内程度に公開します。">研修資料</a> (47)
    <ul class='children'>
    <li class="cat-item cat-item-19"><a href="https://www.itpk.jp/?cat=19" >Tips</a> (26)
    </li>
    <li class="cat-item cat-item-7"><a href="https://www.itpk.jp/?cat=7" title="社内向けのWordPress研修資料を公開します。">WordPress研修</a> (12)
    </li>
    <li class="cat-item cat-item-25"><a href="https://www.itpk.jp/?cat=25" >技術解説</a> (9)
    </li>
    </ul>
    </li>
    <li class="cat-item cat-item-3"><a href="https://www.itpk.jp/?cat=3" title="ITPKで提供している製品とご支援させていただいた一部のお客様の紹介記事です。。">製品紹介と製作実績</a> (33)
    <ul class='children'>
    <li class="cat-item cat-item-33"><a href="https://www.itpk.jp/?cat=33" title="携帯電話を使ったスタンプラリーツールです">スタンプラリーツール(いちご)</a> (1)
    </li>
    <li class="cat-item cat-item-12"><a href="https://www.itpk.jp/?cat=12" >バックアップツール(MoodyBlues)</a> (5)
    </li>
    <li class="cat-item cat-item-8"><a href="https://www.itpk.jp/?cat=8" >作業効率化ツール(Redmine)</a> (6)
    </li>
    <li class="cat-item cat-item-35"><a href="https://www.itpk.jp/?cat=35" >印刷物・イベントグッズ</a> (2)
    </li>
    <li class="cat-item cat-item-4"><a href="https://www.itpk.jp/?cat=4" title="ご支援させていただいた一部のお客様の紹介記事です。">製作実績</a> (15)
    </li>
    <li class="cat-item cat-item-34"><a href="https://www.itpk.jp/?cat=34" title="メールを活用した集客支援ツールです">集客支援ツール(KitCom)</a> (3)
    </li>
    </ul>
    </li>
    <li class="cat-item cat-item-24"><a href="https://www.itpk.jp/?cat=24" >雑記</a> (45)
    </li>

    Processed HTML:
    <li class="cat-item cat-item-5"><a href="https://www.itpk.jp/?cat=5" title="ITPKからのお知らせ記事です。">お知らせ</a> (3)
    </li>
    <li class="cat-item cat-item-28"><a href="https://www.itpk.jp/?cat=28" title="ITPK のメンバーが、どんなことを考えて仕事をしているのか、を知ってもらえれば幸いです。
    ">こんなこと考えてます</a> (3)
    </li>
    <li class="cat-item cat-item-29"><a href="https://www.itpk.jp/?cat=29" >フリー画像</a> (5)
    </li>
    <li class="cat-item cat-item-6"><a href="https://www.itpk.jp/?cat=6" title="社内向けの研修資料を、業務に支障の内程度に公開します。">研修資料</a> (47)

    <li class="cat-item cat-item-19"><a href="https://www.itpk.jp/?cat=19" >Tips</a> (26)
    </li>
    <li class="cat-item cat-item-7"><a href="https://www.itpk.jp/?cat=7" title="社内向けのWordPress研修資料を公開します。">WordPress研修</a> (12)
    </li>
    <li class="cat-item cat-item-25"><a href="https://www.itpk.jp/?cat=25" >技術解説</a> (9)
    </li>

    <li class="cat-item cat-item-3"><a href="https://www.itpk.jp/?cat=3" title="ITPKで提供している製品とご支援させていただいた一部のお客様の紹介記事です。。">製品紹介と製作実績</a> (33)

    <li class="cat-item cat-item-33"><a href="https://www.itpk.jp/?cat=33" title="携帯電話を使ったスタンプラリーツールです">スタンプラリーツール(いちご)</a> (1)
    </li>
    <li class="cat-item cat-item-12"><a href="https://www.itpk.jp/?cat=12" >バックアップツール(MoodyBlues)</a> (5)
    </li>
    <li class="cat-item cat-item-8"><a href="https://www.itpk.jp/?cat=8" >作業効率化ツール(Redmine)</a> (6)
    </li>
    <li class="cat-item cat-item-35"><a href="https://www.itpk.jp/?cat=35" >印刷物・イベントグッズ</a> (2)
    </li>
    <li class="cat-item cat-item-4"><a href="https://www.itpk.jp/?cat=4" title="ご支援させていただいた一部のお客様の紹介記事です。">製作実績</a> (15)
    </li>
    <li class="cat-item cat-item-34"><a href="https://www.itpk.jp/?cat=34" title="メールを活用した集客支援ツールです">集客支援ツール(KitCom)</a> (3)
    </li>

    <li class="cat-item cat-item-24"><a href="https://www.itpk.jp/?cat=24" >雑記</a> (45)
    </li>

    Category pattern:
    /http\:\/\/www\.itpk\.jp\/\?cat\=(\d+)/

    Items:
    Array
    (
        [0] => <li class="cat-item cat-item-5"><a href="https://www.itpk.jp/?cat=5" title="ITPKからのお知らせ記事です。">お知らせ</a> (3) </li>
        [1] => <li class="cat-item cat-item-28"><a href="https://www.itpk.jp/?cat=28" title="ITPK のメンバーが、どんなことを考えて仕事をしているのか、を知ってもらえれば幸いです。 ">こんなこと考えてます</a> (3) </li>
        [2] => <li class="cat-item cat-item-29"><a href="https://www.itpk.jp/?cat=29" >フリー画像</a> (5) </li>
        [3] => <li class="cat-item cat-item-6"><a href="https://www.itpk.jp/?cat=6" title="社内向けの研修資料を、業務に支障の内程度に公開します。">研修資料</a> (47)</li>
        [4] => <li class="cat-item cat-item-19"><a href="https://www.itpk.jp/?cat=19" >Tips</a> (26) </li>
        [5] => <li class="cat-item cat-item-7"><a href="https://www.itpk.jp/?cat=7" title="社内向けのWordPress研修資料を公開します。">WordPress研修</a> (12) </li>
        [6] => <li class="cat-item cat-item-25"><a href="https://www.itpk.jp/?cat=25" >技術解説</a> (9) </li>
        [7] => <li class="cat-item cat-item-3"><a href="https://www.itpk.jp/?cat=3" title="ITPKで提供している製品とご支援させていただいた一部のお客様の紹介記事です。。">製品紹介と製作実績</a> (33)</li>
        [8] => <li class="cat-item cat-item-33"><a href="https://www.itpk.jp/?cat=33" title="携帯電話を使ったスタンプラリーツールです">スタンプラリーツール(いちご)</a> (1) </li>
        [9] => <li class="cat-item cat-item-12"><a href="https://www.itpk.jp/?cat=12" >バックアップツール(MoodyBlues)</a> (5) </li>
        [10] => <li class="cat-item cat-item-8"><a href="https://www.itpk.jp/?cat=8" >作業効率化ツール(Redmine)</a> (6) </li>
        [11] => <li class="cat-item cat-item-35"><a href="https://www.itpk.jp/?cat=35" >印刷物・イベントグッズ</a> (2) </li>
        [12] => <li class="cat-item cat-item-4"><a href="https://www.itpk.jp/?cat=4" title="ご支援させていただいた一部のお客様の紹介記事です。">製作実績</a> (15) </li>
        [13] => <li class="cat-item cat-item-34"><a href="https://www.itpk.jp/?cat=34" title="メールを活用した集客支援ツールです">集客支援ツール(KitCom)</a> (3) </li>
        [14] => <li class="cat-item cat-item-24"><a href="https://www.itpk.jp/?cat=24" >雑記</a> (45) </li>
    )

  • お知らせ (3)
  • こんなこと考えてます (3)
  • フリー画像 (5)
  • 研修資料 (47)
  • 製品紹介と製作実績 (33)
  • 雑記 (45)
月別アーカイブ
検索

‘WordPress’ タグが付けられた記事

Twpitter

ツピッター

Twpitter です。

Twpitter(ツピッター) = Twitter + WordPress 。

簡単に書くと、「前日のTwitterまとめを WordPress に投稿する」 Webサービスです。

続きを読む »

いつの間にか公開されていました。ブログによると6月22日ですが、まったく気がつきませんでした。

変更点の中で一番楽しみなのは、新デフォルトテーマ「Twenty Ten」(2010年)。メニュー作成がどれくらい簡単にできるのか、気になります。

さっそく検証用環境で試してみます。

続きを読む »

以前、「最近の投稿」に日付を入れる方法を紹介しました。

同じ悩みを持つ方が多かったようで、けっこうなアクセス数がありました。

今回は、ITPK版ページ ウィジェットを作ってみます。

親兄弟ページへのリンク

やりたいことを大雑把に書くと、「現在表示中のページの、親ページと兄弟(姉妹?)ページを表示する」ということです。

続きを読む »

WordPressでサイト運営されている方は、サイドバーに「最近の投稿」ウィジェットを使用している方も多いと思います。

でも日付が表示されないので、更新頻度をアピールしにくいのが難点です。

そこで、サイドバーの「最近の投稿」に更新日を付加する方法を紹介します。

続きを読む »

ITPK002テーマ

以前紹介した、超シンプルなWordPressテーマに、少し手を加えて、枠線を角丸四角形にしました。

角丸四角形テーマ

これをベースにして独自のデザインを作成してください。

もちろんそのまま使ってもかまいませんが、そのまま使うくらいならもっといいのがあると思います

続きを読む »

多くの無料テーマ(デザインテンプレート)が魅力の WordPress ですが、何も手を加えずに使えることはあまり多くありません。

時には原型をとどめないほどにカスタマイズすることも・・・。

それでも、どこかに著作権表示などを入れておかなければいけないという縛りがあります。

超シンプルテーマ

ITPK001テーマ

そこで、とてもシンプルなテーマを作りました。

これは、このまま使うためのものではありません(使ってもいいですけど)。

これをベースにして独自のデザインを作成するためのものです。

せっかくなので公開します。

自由に使ってください。

header.php に「Designed by ITプロデュース熊本」と書いてありますが、削除してしまってOKです。

改変も再配布も自由にしていただいて結構ですが、改変の有無に関わらず、バグ修正や機能追加の要望には応じられません。あくまでも自己責任でお願いします。

ダウンロードはこちらから。

WP lightbox 2 というブラグインを導入しました。

これは、画像を格好良く表示するためのプラグインで、画像をクリックすると黒地に写真が浮かび上がるように表示されます。

シンケンジャーショー

シンケンジャーショー

例えばこんな具合に。

画像が1枚だけであれば、普通の投稿と同じようにすれば、LightBox2 が適用されます。

画像をグループ化する

複数の画像をグループ化して、表示中に前後の画像に切り替えるスライドショーのような表示もできます。

大津町消防出初め式

大津町消防出初め式

画像表示中に画像をクリックすると、次の画像へと切り替わります。

また、画像の左端にマウスポインタを持っていくと Prev 、右端に持っていくと Next と表示され、前後の画像へ移動することもできます。

または、キーボードの P や N を押すことでも、前後に切り替えることができます。

グループ化するには投稿記事の編集画面(HTMLモード)で、グループ化したい写真へのリンクタグに、rel オプションを指定します。

<a href="1枚目画像のURL" rel=”lightbox[グループ名]” title="1枚目タイトル">
    <img src="1枚目サムネイル画像のURL" />
</a>
<a href="2枚目画像のURL" rel=”lightbox[グループ名]” title="2枚目タイトル"></a>
<a href="3枚目画像のURL" rel=”lightbox[グループ名]” title="3枚目タイトル"></a>
        :
        :

2枚目以降の<a>~</a>の間に、それぞれのサムネイルを入れることも可能です。

今回は、ピンポイントで「ヘッダー部分に画像を入れる(or 変える)」方法です。

FireFox + FireBug を使うことを前提に説明しますが、Google Chrome でもほぼ同じ手順でできますので、好きな方を使ってください。

それ以外に、FTPクライアント(FFFTPなど)と画像編集ソフト(GIMPなど)、テキストエディタ(行番号表示があるものがよい)が必要です。

スタイルの適用対象を調べる

要素を調査

ITPKのホームページを開き、ヘッダー部分の背景画像のあたりで 右クリック→要素を調査 を選んでください。



HTMLとCSS表示

HTMLとCSSなどの情報が表示されます。

今回は偶然、背景画像を指定している部分( background-image : url(images/Header.jpg) ; )が出てきましたが、そう上手く行かなかった場合には、左半分のHTMLエリアにフォーカスを合わせ(=クリックし)て、カーソルキー(キーボードの矢印キー)の上下で、ハイライト(反転表示行)を移動させてみてください。右半分のCSS領域に、背景画像を指定している部分がでる箇所があるはずです。

右上辺りに、青文字で 「style.css(586行目)」と書いてあります。つまり、そこに背景画像を指定する記述があるのです。


ファイルの場所

マウスポインタを青文字の「style.css(586行目)」に合わせると、ツールチップテキストでURLが表示されます。今回は「 http://www.itpk.jp/wordpress/wp-content/themes/three_worlds_apart_ote_071/style.css 」 と表示されました。

この style.css ファイルを基点にして、images/Header.jpg で見ることのできるファイルが、画像ファイルです。

FTPクライアントで、アクセスしてみましょう。

style.css の場所

ITPKのサーバに接続し、/public_html/wordpress/wp-content/themes/three_worlds_apart_ote_071/ を開いた状態です。ここにある style.css が、ページのデザインに影響を与えているのです。



Header.jpg の場所

その中の images ディレクトリです。

この中の Header.jpg をダウンロードしてから開いてみれば、背景画像であることが分かるはずです。


背景画像を書き換える

まずは、ダウンロードした Header.jpg ファイルを書き換える方法を試してみましょう。

例えば、色合いを変えてみるとか、図形を描き加えてみるとか、逆に何かを消してみるとか。画像の縦横サイズさえ変えなければ、何をしてもかまいません。

こうして編集した Hearer.jpg を、FTPクライアントを使って ITPKのサーバの Header.jpg に上書きしてください。

ブラウザで再読み込み(場合によっては Ctrl + F5 で強制再読込)することで、ヘッダー部分の画像が変わるはずです。

背景画像を別の画像にする

次に、まったく別の画像にしてみましょう。

新しい画像ファイルのファイル名を、Header2.jpg 、幅 800px 高さ160px だとします。これらは自分が使うファイルに合わせて読み替えてください。

まず、画像ファイルを FTPクライアントを使って、サーバにアップロードします。

次に、style.css ファイルをダウンロードし該当部分、先程調べた586行目からを編集します。

div.Header-jpeg
{
  position: absolute;
  z-index:-1;
  top: 0;
  left: 0;
  width: 800px;
  height: 160px;
  background-image: url('images/Header2.jpg');
  background-repeat: no-repeat;
  background-position: center center;
}

通常は、画像のサイズを変えると、他の要素のバランスがずれてしまいます。これは、画像サイズに合わせて、他の要素のサイズや位置が調整されているためです。

なので、前後の要素も同様の方法で「要素を調査」して、サイズ(CSSファイルの width と height の値)や位置(CSSファイルの top , left , right . bottom の値)を微調整する必要があります。

やり方自体は同じなので、いろいろ試してみてください。

新しく背景を入れる

最後に、もともと背景画像のないテーマに、背景画像を入れる方法です。

やり方自体は今までと同じで、画像をアップロードして、CSSファイルを書き換えるだけなのですが、元のCSSファイルに「background-image:」の記述がないため、「CSSのどこを?」が分からないと思います。

そんな時は、左半分のHTML領域内でマウスを動かしてみてください。ページの該当する部分の色が変わって表示されます。これで、おおよその場所がわかりますので、その部分のCSS記述に、background-image: などの情報を書き加えてください。

ベストな方法

本来であれば、HTMLとCSSの仕組みを理解して、変更箇所を見つけるべきです。

ただ、そうするには既存のWordPressのテーマは複雑すぎるため、上記のような方法を紹介しました。

単純なテーマでも自力で作ればかなり理解が深まりますので、時間があったら挑戦してみてください。