ブログ

  • オンマウスで枠の太さを変える(太く)する方法

    divで囲ったようなコンテンツにマウスが乗ったとき、枠線の太さを変更するとコンテンツが大きくなったような動きになります。

    こうした挙動が意図したものではない時に使える方法をメモしておきます。

    作業手順

    1.太くなった枠線の画像を作成

    png等、透過が使える画像で、枠線だけの画像を準備します。

    2.CSS

    CSSでimgのopacity: 0;に設定し、:hoverでopacity: 1;に設定すればオンマウスで枠線の太さを変更することができる。

  • Yoastのsitenameがtwice(2重)に表示されてしまう時の対処法

    Yoast WordPress Seoを使用して、サイトのタイトルにsitenameが2重に表示されてしまっていた時の対処法のメモです。

    Google検索すると「Yoast sitename twice」という英語の検索キーワードがサジェッションされていましたので、色々と見てみると、「Titles & Metas」の「General」→「Title settings」の「Force rewrite titles」にチェックを入れると解決できるようです。

    テーマによって異なるようですが、当サイトもチェックを入れる事で解決でした。

    日本語のページがなかったのでメモしておきます。

  • ブログアーカイブページ作成時の注意点

    タイトルの文字数が変動する場合のレイアウト乱れ

    解決案1

    タイトルの文字数制限を設ける

    解決案2

    高さを決めてはみ出した部分をoverflow: hidden;で非表示にする。

    はみ出てても体裁が良い様に行間を調整しておく。

  • タグやカテゴリーを編集できるプラグイン

    カテゴリーを統合したり、削除したり出来るプラグイン「Term Management Tools」

    タグを簡単に管理できるプラグイン「Simple Tags」

  • Googleの検索エンジンに瞬時にインデックスさせることができるプラグイン「PuSHPress」

    PuSHPressは、WordPressに記事を投稿すると、Googleの検索エンジンに瞬時にインデックスさせることができるプラグイン.

  • リンク切れをチェックしてくれるプラグイン「Broken Link Checker」

    「Broken Link Checker」はリンク切れテキストを打ち消し線にしてくれるプラグイン。

    リンク切れノ詳細もチェックできる。

  • Popular Postカスタマイズ完全マニュアル

    WordPress Popular Postと並んで人気のプラグイン「Popular Post」。

    カスタマイズ完全マニュアルと銘打ちましたので、カスタマイズ系の情報を全て網羅できたらと思っています。

    現在執筆中ですので備忘録的な要素が強いですが、参考にしてください。

    WordPress Popular Postとの違い

    一長一短ですが、Wordpress Popular Postの方が更新頻度も多く扱いやすいですが、カスタマイズ性は「Popular Post」の方が高いです。

    例えば、人気の記事ランキングに記事のカテゴリを表示させ、カテゴリに応じて背景色を変えたいといったことは「Wordpress Popular Post」ではできません。細かな設定をしたいという場合はPopular Postがお勧めです。

    Popular Postのインストール

    Popular Postのインストールに「Post-Plugin Library」というプラグインが別途必要になります。

    こちらも公式プラグインですので、プラグインの検索からインストールし有効化しましょう。

    Popular Postのカスタマイズ

    Popular Postでサムネイル画像を表示する

    {php: echo get_the_post_thumbnail( {postid}, array(190,160), array('title' => ' {title}' )); }

    Popular Postで順位を表示する

    phpを使って順位を表示することができる。

    http://www.347memorandum.com/cms/wordpress/2011/12/0000130/

    Popular Post利用可能タグ一覧

    Available Tags 日本語
    {author} 作者を表示
    {authorurl} 作者をurl付きで表示
    {categoryid} カテゴリーidを表示
    {categorylinks} カテゴリーをリンク付きで全て表示
    {categorynames} カテゴリーをりんくなしで全て表示
    {commentcount} コメント数を表示
    {custom}
    {date} 投稿日を表示
    {dateedited}
    {excerpt} 抜粋を表示
    {fullpost} 記事全部
    {gravatar} アバターを表示
    {if}
    {image} 記事内の最初の画像を表示
    {imagealt} 記事内の最初の画像のaltを表示
    {imagesrc} 記事内の最初の画像のurlだけを表示
    {link} タイトルをリンク付きで表示
    {php} phpコードを記述する際に使用。サムネイルもこのタグで表示できる。
    {postid} 記事のidを表示
    {postviews} 記事の閲覧数を表示
    {snippet}
    {tags} 記事のタグを表示
    {taglinks} 記事のタグをリンク付きで表示
    {title} 記事のタイトルを表示
    {time} 記事の投稿時間を表示
    {timeedited}
    {totalpages}
    {totalposts}
    {url} 記事のurlを表示
  • WordPress Popular Postカスタマイズ完全マニュアル

    [Googlead]

     

    ノンプログラマがWordpressで人気の記事を表示させるのに欠かせないのがWordPress Popular Postというプラグイン。

    基本的な機能を使うだけであればものの5分で設定可能だ。

    しかし、このプラグインには様々なオプション機能があり

    カスタマイズのオプションも多岐にわたる。

    この記事は「Wordpress Popular Postカスタマイズ完全マニュアル」と銘打って

    このプラグインのカスタマイズの全てを網羅していこうと思う。

    現在記事は執筆中のため、備忘録的な体裁になるが少しでも参考になればと思い公開しながら更新していく。

    WordPressPopularPostの「投稿日付:」や「カテゴリー:」を削除する

    [Googlead]

     

    「インストール済みプラグイン」から「Wordpress Popular Posts」の下の「編集」をクリックし、

    プラグインを直接編集していく。

    ※プラグインのアップデートに伴ってコードの位置は異なることになる。

    wordpress-popular-posts/wordpress-popular-posts.phpファイル内から該当するコードを削除。

    カテゴリ:を削除する

    下のコードをファイル内から検索し、全てを削除。

    . __('under', 'wordpress-popular-posts')

    投稿日付:を削除する

    下のコードをファイル内から検索し、全てを削除、またはposted onの文字列を任意の文字列に変更。

     . __('posted on', 'wordpress-popular-posts')

    セパレーター「 | 」を削除する

    該当する位置の | をファイル内から検索し、削除。

    WordPressPopularPostの「views」を変更する

    こちらも「インストール済みプラグイン」から「Wordpress Popular Posts」の下の「編集」をクリックして、プラグインを直接編集。

    wordpress-popular-posts/wordpress-popular-posts.phpファイル内から該当するコードを編集。

    $views_text = sprintf(
    							_n('1 view', '%s views', intval($pageviews), 'wordpress-popular-posts'),

    上の「views」の箇所を任意のテキストに変更。削除する事ももちろん可能だ。

    WordPress poplar post に順位を表示させる

    ulではなくolでマークアップし、番号を装飾する方法。下のサイトが分かり易く解説しているので参考にすると良い。

    http://ateitexe.com/ol-ranking-styling/

     

  • Meteor Slidesでタイトルを表示させる方法

    Meteor SlidesというWordpressプラグインはレスポンシブデザインにも対応した大変手軽なプラグインです。

    このプラグインで画像スライドショーに画像のタイトルを表示させる方法の備忘録です。

    詳しい解説は作者のホームページで確認できる。(英語)

    http://jleuze.com/plugins/meteor-slides/customizing-the-slideshow-template/

    Meteor Slidesでタイトルを表示させる方法

    meteor-slideshow.phpファイルの

    </div><!-- .mslide -->

    というコードの上に下のコードを貼付けます。

    <p><?php the_title(); ?></p>

    CSSを追加

    そのままでは表示されないので、CSSに下記を追加で完了です。

    .meteor-slides p {
        background: rgba(0,0,0,0.2);
        bottom: 0;
        color: #000;
        left: 0;
        line-height: 20px;
        margin: 0;
        padding: 2%;
        position: absolute;
        text-align: center;
        width: 96%;
    }