2012-12-24

パンくずリストを付けてみました

久々の連休ということで、例によってサイトをちょこちょこいじっていました。

今回はパンくずリストを追加してみました。パンくずリストというのは、ページ上部に設置するナビゲーションで、大抵

HOME > 親カテゴリ > 子カテゴリ > 記事のタイトル

みたいになっているものです(よく分からなければ、この記事のタイトルをクリックして、リンク先を見て下さい。多分

HOME > パソコン > ウェブサイト作成 > パンくずリストを付けてみました

となっていると思います。

WordPressの場合、パンくずリストは「アーカイブ」「固定ページ」「単一記事」、さらにこだわるなら「404テンプレート」「検索結果」などに別々のスクリプトを設置しなければいけないのですが(プラグインを使う方法もあるのですが、現時点ではあまりオススメできません)、その問題を解消するのにWebデザインレシピさんの以下の記事がとても役立ちました。

パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない(コード 付き)

で、ひとまず試してみて、ちょっと気になったところに手を加えています。備忘のためにメモ。

  • コードをそのままfunction.phpに貼り付けると、エラーが出てサイトそのもの(ダッシュボード含む)にアクセスできなくなってしまった(バックアップのfunction.phpをFTPでアップロードして事なきを得た。バックアップしてなくてもFTPでfunction.phpをダウンロードし、それを→の通り書き直してアップロードすれば問題ないはず)。1行目と最終行を削除すると上手くいった。
  • デフォルトだとパンくずリストはリスト形式(縦一列表示)になってしまうので、スタイルシートでul/liを適切に設定する。うちの場合は
    /* breadcrumb */
    .pan {
     font-size: 75% ;
     width: auto;
     margin: 0;
     padding: 5px;
     border: 1px solid #009;
     line-height: 1.5;
     color: #009 ;
    }
    .pan ul{
     list-style: none ;
    }
    .pan li{
     float: left ;
     margin: 5px ;
    }
    

    とスタイルシートに記入して、各ページに

        <div class="pan">
          <?php breadcrumb(); ?>
        </div>
    

    と挿入。これで横一列に表示される。

アクセスできなくなった時は死ぬかと思いましたが、何とか解決してよかったです。
しかしこのサイトは非常に勉強になりますね…記事タイトルに違わぬ内容でした。

※ゲーム一言日記

  • サモンナイト4…第7話更新。機械人形三姉妹+弟がそろい踏み。
  • エクシリア2…Chapter14をちょっとだけ更新。いいイバルは消えたイバルだけ。

2012-08-16

YARPPをLinkWithin風にした上で、全ての記事にアイキャッチ画像を表示する

久しぶりにこのサイトのデザインをいじってみました。個別記事の末尾に、関連エントリを自動で表示するようにしています。(どういう意味か分かりにくければ、↑にあるこの記事のタイトル(「YARPPをLinkWithin風にした上で、全ての記事にアイキャッチ画像を表示する」)をクリックして個別記事のページに飛び、末尾をご覧下さい。

やり方については、以下の記事を参考にさせてもらいました。

WordPressプラグイン「YARPP」と「Auto Post Thumbnail」を使用して関連記事を表示するのにようやく成功した | OZPAの表4

…が、この方法だとうちのサイトでは問題が。

うちのサイトは個別記事のサムネイル(正式名称は「アイキャッチ画像」)を表示しないデザインになっているので、僕もいちいち全ての記事についてサムネイルを設定することはしていません。上の方法を使うと、サムネイルを設定していない記事は、関連エントリに表示されなくなってしまいます。そこで、次のようにソースを修正してみました(ハイライト部分を追加)。

<?php if(have_posts()):?>
     <p>こっちの記事も合わせてどうぞ</p>
     <div class="related-post">
     <?php while(have_posts()) : the_post(); ?>
          <?php if(has_post_thumbnail()):?>
               <div class="related-entry"><a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail("thumbnail"); ?><br clear="all"><?php the_title(); ?></a></div>
          <?php else: ?>
               <div class="related-entry"><a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><img src="[デフォルトで表示させる画像のパス]" width=150 height=150><br clear="all"><?php the_title(); ?></a></div>
          <?php endif; ?>
     <?php endwhile; ?>
     </div>
<?php else: ?>
     <p>関連記事はありません</p>
<?php endif; ?>

こうしておけば、サムネイルが設定されていない記事には、デフォルトで表示させる画像が一律に表示されるようになります。

ググってもこのことについて触れたサイトが見つからなかったので、備忘のために記事にしておきます。


2012-01-04

ウェブサイトを改修しました

長期休暇のお約束で、ウェブサイトを少々いじりました。備忘のために記録を残しておきます。

  • サイドバーから「最近の投稿」をなくしました。
    本文見れば最近10日分の投稿が表示されていて必要性が感じられなくなったので。
  • サイドバーの最上部に、「検索フォーム」「その他のコンテンツ」を移動しました
    最近テイルズのプレイ日記目当てのお客様が増えているように感じたので、思い切って最上部に移動しました。
    日記ログまとめ」も先日PHP化しています。
  • タグクラウドのフォントサイズを下げました
    タグの種類が増えて見づらくなってきたので。
    タグクラウドを管理するのであれば、Configurable Tag Cloudが使いやすいと思います。こちらのサイトを参考にさせていただきました。
    WordPressのタグクラウドを細かにカスタマイズできるプラグイン『Configurable Tag Cloud』|MONODEZ
  • サイドバーの下部に、外部リンクを設置しました
    旧リンクページは数年来更新をしていなかったので、閉鎖サイト等を整理し、新たなリンクを作りました。
  • サイドバーの幅を変更しました
    これまでのは幅が狭すぎて、カテゴリとかの表示が不格好だったので。
    ちなみに僕が使用しているのは、小粋空間様の配布しておられるテーマを改造したものですが、幅を変更するときは、style.cssの以下の部分を変更する必要があります(オリジナルのテーマも同様)。
    • form>#searchtext>width
    • 2カラムリキッド(左サイドバー) >.layout-two-column-liquid-left .blog>margin-left
    • リキッドレイアウト・サイドバー>.layout-two-column-liquid-left #links-left-box>width
  • 各投稿の末尾に、タグを表示することにしました
    「タグ: <?php the_tags(”, ‘,’); ?>」で設置出来ます(<>は半角にしてください)

 


2011-11-03

WordPressプラグイン更新時のエラー

最近、Wordpressのプラグインの更新をしようとすると、「古いバージョンを削除できません」というエラーが出て更新できないことが時々あります。昨日もWP-PageNaviを更新しようとしたら同じ症状が出ました。

仕方なくプラグインが入っているフォルダそのものを削除しようとしても、Access Deniedの表示が出て弾かれてしまい、どうにもなりません。ローカルにあるバックアップをアップロードしても、やっぱりエラーが出て止まってしまいますし、新しくインストールし直そうにもやはりうまくいきません。

今のところ解決策は「しばらく(通常1時間程度)放置して再インストールする」というものしかないです。これで今まで直らなかった事はないんですけど、時間経過で解決するような問題とも思えず、なんとなく気持ち悪い状態は残ったままです。

同じ症状の方もなかなか見つかりませんでした。どなたか原因をご存知の方がいましたら、お教えください。


2011-07-05

ExpresswebにおけるWordPressのバックアップ

やや普通のレンタルサーバーの場合と方法が異なるので今後のためにメモ。ちなみにサポセンの回答に基づいています。ここのサポセンは質問に対する回答が非常にわかりやすく、かつかゆい所まで手が届くので本当に助かっています。サーバー代も安いし、マジオススメ。

一般のサーバーにおけるバックアップについてはCodexを参照のこと。

  1. Expresswebの場合、デフォルトでデータベースのバックアップシステムが備わっているので、それを用いてMySQLのバックアップを行う。方法はナレッジベース参照(手順1.でMySQL 5.xを選べばよい)。これでWordPressの構成や設定(サイト名や使用テーマ・プラグイン)、投稿内容などはバックアップできる。
  2. これだけだとWordPressの本体ファイルや、テーマファイル、プラグインファイルなどはバックアップできないため、FTPなどを使ってwpフォルダ内のデータをバックアップしておく(僕はミラーリングダウンロードをしています)。
  3. ちなみに、バックアップ用プラグインWP-DBManagerについては、ウェブサーバとデータベースサーバを物理的に分けているExpresswebでは使えないとのこと。

これで何かあっても安心ですね。


2011-05-14

Windows系サーバーにおけるWordPressのリダイレクトについて

そんなわけで無事にリダイレクト処理をすることが出来ました。

後学のために、どう処理したかを記録しておこうと思います。ググったけど見つからなかったので、Expresswebのサポセンに聞いた内容です。

テーマ:Windows系サーバー(.htaccessが使えない)で、Wordpressを専用ディレクトリに配置し、かつルートディレクトリにあるように見せかけるにはどうすればよいか?(http://wpdocs.sourceforge.jp/Giving_WordPress_Its_Own_DirectoryのWindows系サーバー編だと思ってください)

基本的には、専用ディレクトリ(ここでは/wp/とします)にあるweb.configが.htaccessの代わりをするので、↑の.htaccessをweb.configと読み替えればOKです。具体的には、

  1. 管理パネルで [設定]-[ 一般]の順に開く
  2. [サイトのアドレス (URL)]のみを ルートフォルダ(このサイトならhttps://www.yukkun20.com/)に変更する
  3. [変更を保存]する
  4. /wp にあるindex.phpファイルとweb.configファイル(パーマリンク設定などをしていなければ存在しないので、無視する)をルートにコピーする
  5. コピーしたindex.phpをファイルマネージャから開く
  6. 次のように変更して、保存をする
     変更前:require(‘./wp-blog-header.php’);
     変更後:require(‘./wp/wp-blog-header.php’);
  7. /wp/web.configを削除する。またルートフォルダにindex.htmlファイルなどがある場合、index.phpよりも優先して表示されてしまうので、削除する
  8. パーマリンク設定をしている場合は、[設定]-[パーマリンク設定]から設定を更新する(「web.configを更新してください」という表示が出る場合は、http://wpdocs.sourceforge.jp/%E3%83%91%E3%83%BC%E3%83%9E%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9にある「mod_rewrite なしでのパーマリンクの設定」が参考になります。Expresswebの場合はPATHINFO パーマリンクを利用する2番目の方法で、パーミッションを変更することなくクリアできました)
  9. ブラウザからルートフォルダへアクセスし、動作を確認する(ダッシュボードは/wp/wp-admin/のままです)。ダッシュボードではログインしているのに、ブログではログインされていないという状況になることもあるようですが、ダッシュボードを一旦ログアウトし再ログインすれば大丈夫です。