• HOME
    • >
  • タグ: wordpress，プラグイン

    • プラグインを使わないで、関連する投稿記事を表示する

    2017年8月8日 コメントをどうぞ

    WordPressには、標準装備以外の機能を追加してくれるプラグインが数多く配布されています。
    とても便利なのでついつい、あれもこれもとインストールしてしまいがちですが、メリットがあれば当然デメリットもあるわけで。
    プラグインを入れ過ぎるとアップデート作業も増えますし、めったにないことですがアップデートの際に重大な不具合を起こすリスクもあります。

    WordPress Related Postsのアップデートでエラー

    この前、WordPress Related Postsのアップデートで、そのめったにない不具合を経験しました。
    WordPress をバージョン 4.8 に更新して、そのあとWordPress Related Postsをバージョン 3.6.4 にアップデートしようと更新ボタンを押した途端、画面が真っ白！何も表示されない状態になってしまいました。
    管理画面も真っ白で入ることができず、私の頭の中も真っ白に！
    本来ならこんなトラブルの時こそ、エラーの原因を追究してスキルを上げるチャンスなのですが、真っ白な画面が恐ろしくて気持ちの余裕をなくし、すぐにFFFTPを立ち上げてサーバーからWordPress Related Postsを削除しました。
    それで一応問題なくサイトは復旧しました。

    あとから検索するとこのエラーに対して、解決法がネットにありました。
    原因は「PHPのバージョンが5.3以下だと作動しない」ことだそうです。

    参照サイト：

    【WordPress】関連記事プラグインRelated Postsエラーの解決方法

    プラグイン無しで関連投稿記事を表示させる方法

    WordPress Related Postsはバックアップを取ってあったので、旧バージョンをサーバーにアップし、そのまま使い続けていました。こんな感じで関連記事を表示させています。

    しかし、このプラグインのアップデートは当分できないので、この際、プラグインを使わず関連投稿記事を表示させてみることにします。

    以下のサイトを参照させていただきました。ありがとうございます！

    WordPressのサムネイルつき関連記事を表示する

    プラグインなしで関連記事を表示する方法[WordPressカスタマイズ]

    『WordPressのサムネイルつき関連記事を表示する』のコードでは、サムネイルの下にタイトルといった形で横並びに5個表示されます。
    『プラグインなしで関連記事を表示する方法[WordPressカスタマイズ]』のコードでは、サムネイルの横にタイトルと記事の抜粋を表示し、それを10個縦に並べたスタイルになります。
    どちらも関連した記事を、ページを読み込むごとにランダムに表示させます。

    新規にテンプレートを作成する
    related-entries.php

    テーマ内にrelated-entries.phpというファイルを新規に作成します。
    コードは下記のようにしました。

    <?php
//カテゴリ情報から関連記事を5個ランダムに呼び出す
$categories = get_the_category($post->ID);
$category_ID = array();
foreach($categories as $category):
  array_push( $category_ID, $category -> cat_ID);
endforeach ;
$args = array(
  'post__not_in' => array($post->ID,'booklist'),
  'posts_per_page'=> 5,//表示させる個数
  'category__in' => $category_ID,
  'orderby' => 'rand',//ランダムに表示させる
);
$query = new WP_Query($args); ?>
  <?php if( $query -> have_posts() ): ?>
  <?php while ($query -> have_posts()) : $query -> the_post(); ?>

     <ul class="related-entry">
      <li class="related-entry-thumb">
  <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
        <?php if ( has_post_thumbnail() ): ?>
        <?php the_post_thumbnail(array(100,100)); //サムネイルのサイズ?>
        <?php endif; ?>
        </a>
      </li>
             <li class="related-entry-title"> <a href="<?php the_permalink(); ?>">
          <?php the_title(); ?>
          </a></li>
    </ul>

  <?php endwhile;?>
  <?php else:?>
  <p>記事はありませんでした</p>
  <?php
endif;
wp_reset_postdata();
?>
<br style="clear:both;">

    

    下記のコードをテーマのテンプレートの表示させたい所に挿入します。
    
一般的にはsingle.phpに表示させるようです。
    

    
 <!-- 関連する投稿ここから -->             

            <div id="related-entries">
  <h3>関連する投稿</h3>
  <?php include( TEMPLATEPATH . '/related-entries.php' ); ?>
</div><!-- #related-entries -->
     <!-- 関連する投稿ここまで -->

    

    （※）今までWordPress Related Postsを導入していた場合は、テンプレートに記述してある以下のコードを必ず削除しましょう。
    

    <?php wp_related_posts()?>
    

    style.CSSのコードも書いておきます。あまり参考にならないかもしれませんが・・・
    
(※ただ今cssを修正中です。）
    
仕上がりはこんな感じです。5個の関連記事を横並びにしてみました。
    

    

    一つプラグインを減らすことができて、ちょっとスッキリです。と言いたいところですが、こんな記事を見つけました。
    

    

    【WordPress】プラグイン選びのポイント～悪いプラグインって何？
    

    

    私もプラグインをあれこれ入れてみては削除し、を繰り返してきたのでデータベースには相当ゴミがたまっているはず。次回は、溜まったゴミを削除するプラグインClean Optionsを試してみたい。

    関連記事を表示する「WordPress Related Posts」を少しカスタマイズしてtopページにも表示してみました。

    2015年12月16日 コメントをどうぞ

    WordPressの投稿に関連記事を表示するプラグインはいろいろありますが、私が最初に導入したのは「Yet Another Related Posts Plugin」でした。
    「Yet Another Related Posts Plugin」は日本語対応。投稿と関連性の高い記事を自動選択して、トップページとシングルページに表示してくれます。
    これまで関連する投稿のタイトルだけを表示していたのですが、急に画像表示もしてみたくなり設定を変えてサムネイル表示してみたところ、下図のような見た目になりました。

    Related01

    無理やり画像を縮小しているため、縦横比が合わなくてちょっと歪な画像になっています。
    「Yet Another Related Posts Plugin」の仕様なのか、プラグインのせいではないのか確認はしていないのですが、この際他のプラグインを試してみることに。

    「関連記事プラグイン WordPress Related Posts の初期設定の方法と使い方」を参照させていただき「WordPress Related Posts」をインストールしてみました。

    下図が「WordPress Related Posts」の設定画面。機能が少ないので設定が簡単です。

    Related03

    8種類のレイアウトから表示タイプを選ぶことができます。
    どのタイプもビジュアルがきれいです。

    Momma

    Related04Modern
    Related05

    Vertical (Large)
    Related06

    Vertical (Medium)

    Related13

    Vertical (Small)
    Related08 Pinterest Inspired
    Related09

    Two Columns
    Related10 Plain (your own css)
    Related12

    今回は”Momma”を選択して関連投稿を10個表示してみました。
    無理やり正方形に縮小することなく画像を切り取るので、すっきりした表示になります。

    Related02

    ログインしている状態なら、投稿ページに「Edit Related Posts」ボタンが表示されます。
    ボタンをクリックすると、関連記事を入れ替えることができます。
    親切な機能と言っていいのか？面倒と言えば面倒のような。楽しいオマケ機能です。

    Related14

    Auto Insert Related Posts(or add<?php wp_related_posts()?>to your single post template) にチェックを入れると、シングルページ（投稿個別記事）のみに関連投稿が表示されます。

    Related07

    チェックを外してテンプレートに直接下記コードを追加すれば、任意の場所に表示させることができる、ということなのでトップページとシングルページの両方に表示できるようにちょっとだけカスタマイズしてみました。

    &lt;?php wp_related_posts()?&gt;

    WordPressのテーマで使用しているcontent.phpの任意の場所にコードを挿入しました。
    備忘録として下記にメモしておきます。

    <br>
～省略～<br>
&lt;div class="entry-summary"&gt;<br>
	&lt;?php the_excerpt(); ?&gt;<br>
		&lt;/div&gt;<br>
&lt;!-- .entry-summary --&gt;<br>
		&lt;?php else : ?&gt;<br>
&lt;div class="entry-content"&gt;<br>
			&lt;?php the_content( __( 'Continue reading &lt;span class="meta-nav"&gt;&amp;rarr;&lt;/span&gt;', 'twentytwelve' ) ); ?&gt;<br>
			&lt;?php wp_link_pages( array( 'before' =&gt; '</p>
<p>&lt;div class="page-links"&gt;' . __( 'Pages:', 'twentytwelve' ), 'after' =&gt; '&lt;/div&gt;<br>
' ) ); ?&gt;<br>
		&lt;/div&gt;<br>
&lt;!-- .entry-content --&gt;<br>
		&lt;?php endif; ?&gt;<br>
         &lt;!--関連する投稿ここから --&gt;<br>
        &lt;?php wp_related_posts()?&gt;<br>
        &lt;!--関連する投稿ここまで --&gt;<br>
&lt;footer class="entry-meta"&gt;<br>
			&lt;?php twentytwelve_entry_meta(); ?&gt;<br>
～省略～<br>

    追記：

    2017年に「WordPress Related Posts」の使用をやめて、プラグイン無しで関連記事を表示させるようにしました。
    ⇒「プラグインを使わないで、関連する投稿記事を表示する」

    WordPressからFacebookに自動投稿する「Social Networks Auto-Poster」

    2015年5月4日 コメントをどうぞ

    rssGraffitiブログで書いた記事をFacebookに自動投稿してくれる無料アプリ、「RSS Graffiti」が4月30日、いきなり（！）サービスを終了してしまいました。

    私は非社交的な性格なので、SNSには向かないのですが、Facebookの機能を覚える必要性があってアカウントを持っています。
    それでこれまでWordPressで書いたブログを「RSS Graffiti」を利用してFacebookに自動投稿してきたのですが、昨日、「RSS Graffiti」がサービス終了したという記事を見つけ慌てました。

    Facebookページを開いてアプリの確認をしてみると、そこには、涙ポロリの丸顔キャラクターが「RSS Graffiti is no longer available.」というメッセージとともに表示されました。 英語翻訳サイト「weblio」で機械翻訳すると、「RSS Graffitiは、もはや利用できません」とのこと。

    無料アプリでは、いきなりのサービス終了もありがちなことらしいです。仕方ないので代替アプリを探してみました。

    検索してみるとWordPressの場合は、プラグインがいろいろあるようです。
    今回は「Social Networks Auto-Poster」を使ってみることにします。
    サイト「9ineBB」の記事『WordPressでFacebookのページへ自動投稿するのを 「NextScripts: Social Networks Auto-Poster」を使って行う方法』を参照しながら設定しました。

    プラグインのインストールは通常通り、WordPressのプラグイン画面から簡単にできますが、「Social Networks Auto-Poster」の設定に必要な

    • FacebookのApp ID
    • FacebookのApp secret

    を、取得するにはFacebook側でアプリの設定をしなければなりません。
    私はそこのところのやり方を知らなかったので、「9ineBB」のように丁寧な解説をしてくれるサイトがなければ、自力で設定するのは大変だったと思います。

    「Social Networks Auto-Poster」の導入を考えている方、『WordPressでFacebookのページへ自動投稿するのを 「NextScripts: Social Networks Auto-Poster」を使って行う方法』は、お勧めですよ。

    追記　2015年5月5日

    「Social Networks Auto-Poster」の設定を見直して修正しました。
    あれこれ設定を変えてテストしてみました。ブログを更新すると瞬時にFacebookの方に反映されます。
    でも連続投稿すると、「ちょっと待ったー」ってなるようです。
    Auto-Poste10
    「Post Type」を上図のように設定すると、Facebookでは下図のように表示されます。
    いろいろ詳細な設定ができて、高機能のプラグインですね。
    Auto-Poster08

    WordPressのマルチサイト機能で複数サイトを作る

    2013年9月12日 コメントをどうぞ

    先月、『ギャラリーをWordPressでリニューアルしました。』に書きましたが、リニューアルに利用したWordPressのマルチサイト機能についてメモしておきます。忘れないうちにメモするつもりが、なんだかんだと時間が経ちすぎて、もはや記憶があいまい。下記のサイトを参照しつつまとめてみます。

    ※参照サイト：「ちょんまげ英語塾」の「WordPressのマルチサイト機能で複数のブログを管理する」

    マルチサイト機能は、WordPress3.0以降から対応。WordPressを1個インストールして、そこに複数のブログサイトを作ることができるものです。

    私は今使っているWordPressブログとは別個に、ギャラリーサイトを作りたかったので、新しくWordPressを1個インストールしました。それをマルチサイト化して、それぞれデザインの異なるブログサイトを4個作成することにしたのです。手順は以下の通り。

    1.まず最初に「サブドメイン形式」にするか「サブディレクトリ形式」にするか決めておく

    これは新しく設置するWordPressのURLをどうするか、ということです。あとから変更ができないため予め決めておく必要があります。

    「サブドメイン形式」の場合

    サブドメインの取得は、レンタルサーバー側で設定をする必要があります。
    当サイトの独自ドメインは『http://art-container.net/』ですが、ロリポップサーバーの場合、独自ドメインを取得しているとサブドメインを数多く作成できます。
    「サブドメイン形式」にした場合、

    URLは『http://〇〇〇.art-container.net/』（〇〇〇は任意の名前）

    となります。検索エンジンはこれを独立したサイトと見なし、ＳＥＯ的には有利である、らしいです。

    「サブディレクトリ形式」の場合

    新たにWordPressをインストールし、フォルダ名を任意の名前に変更して、サイトのルート上に置けば作成できます。
    当サイトの場合、フォルダ名をgalleriesとしたので、

    URLは、『http://art-container.net/galleries/』となります。

    ※「サブドメイン形式」にしろ「サブディレクトリ形式」にしろ、利用しているレンタルサーバーの機能に必要な条件があります。詳しくはWordPress Codex 日本語版の「ネットワークの作成」を参照　（http://wpdocs.sourceforge.jp/%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%AE%E4%BD%9C%E6%88%90）

    2.WordPressをインストールする

    2-1.　「WordPress.org日本語」（http://ja.wordpress.org/）から最新版をダウンロードします。（2013年7月時点では日本語ヴァージョンは3.5.2でした。8月現在は3.6。進化のスピードが加速している！）

    2-2.　ダウンロードしたzipファイルを解凍して展開します。フォルダ名が「wordpress3.5.2ja」となっているのを任意の名前に書き換えて、サイトのルート上に置き、フォルダごとサーバーにアップします。

    2-3.　http://yoursite（サイト名）/example（デレクトリィ名）/にアクセスします。
    下記のメッセージが出たら、『設定ファイルを作成する』をクリックします。

    02

    2-4.　データベース等の設定をします。
    03

    2-5.　『さあ、始めましょう！』をクリックして、データベース等の設定ファイル作成画面に進みます。

    4-1全ての項目に自分のデータベース情報を入力します。
    データベースの接頭辞は既存のwordpressと区別が付くような名前にします。当サイトの場合は、wp_gall_と設定しました。

    2-6.　『送信』をクリックしてインストール画面に進みます。
    05

    2-7.　『インストールの実行』をクリックして、サイト情報の設定画面に進みます。

    062-8.　必要情報を入力し『WordPressをインストール』をクリックして、ログイン画面に進みます。
    上記で設定したユーザー名とパスワードで、サイトにログインします。

    2-9.　ログインすると管理画面（ダッシュボード）が開きます。この段階では、まだマルチサイト機能は有効になっていません。

    09
    3.マルチサイト機能を有効にする。

    マルチサイト機能を有効にするには、wp-config.phpにコードを追加する必要があります。
    wp-config.phpファイルは、WordPressのインストール時に自動生成されるものです。
    wp-config.phpを開いて、任意の場所に以下のコードを追加します。
    任意の場所と言っても、wp-config.phpの下から6,7行目辺りに書かれている
    /* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。*/
    という行より下に書いてはいけないようです。
    追加するコードは以下の1行。

    define('WP_ALLOW_MULTISITE', true);


    4.ネットワークの設定をする。

    コードを追加したwp-config.phpをサーバーにアップすると、管理画面のツールに「ネットワークの設置」の項目が追加されます。

    10「ネットワークの設置」をクリックして、「Wordpressサイトのネットワーク作成」に必要事項を入力し、『インストール』をクリックします。

    11『インストール』をクリックするとwp-config.phpと.htaccessに追記するためのコードが表示されます。.htaccessファイルもwp-config.phpと同様にWordPressのインストール時に自動生成されるものです。
    追記するコードの内容は各自サイトによって多少異なります。

    14１に表示されているコードを wp-config.php ファイルの、
    /* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。*/ という行より上にコピー・ペーストで追加します。

    ２に表示されているコードを.htaccessを開いて追記します。
    追記というより# BEGIN WordPress～# END WordPressの間を上書きする感じです。

    <br />
# BEGIN WordPress<br />
RewriteEngine On<br />
RewriteBase /サイト名/ディレクトリ名/<br />
RewriteRule ^index\.php$ - [L]</p>
<p># add a trailing slash to /wp-admin<br />
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]</p>
<p>RewriteCond %{REQUEST_FILENAME} -f [OR]<br />
RewriteCond %{REQUEST_FILENAME} -d<br />
RewriteRule ^ - [L]<br />
RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]<br />
RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]<br />
RewriteRule . index.php [L]<br />
# END WordPress<br />

    以上のステップを完了し、wp-config.phpと.htaccessをサーバーにアップします。
    一度サイトからログアウトし、再度ログインすると、「サイトネットワーク管理者」という項目が追加されているのが確認できます。

    15「サイトのネットワーク管理者」の「サイトを追加」画面から、いくつでもブログサイトを作成することができます。
    16


    5.マルチサイト（ネットワーク化）の注意点

    テーマ やプラグインのインストールはすべて、まず「サイトネットワーク管理者」の管理画面で行います。各サイトのテーマやプラグインは個別に有効化し設定します。

    ※蛇足ながら付け加えると、WordPressのインストールやネットワークの設定に失敗した場合、新しく作成したフォルダごと削除して最初からやり直せばよいのですが、データーベースにも新しいデータが残っているので、これも必ず削除する必要があります。
    データベースのデータを削除した場合、必ずデータベースの再起動（一度ログアウトして、再ログインする）をすることも大事です。
    これを怠ったために、私は以下のような注意を受けることとなりました。

    07

    アイキャッチ画像をサイドバーの「最近の投稿」に表示する

    2013年4月6日 コメントをどうぞ

    アイキャッチ画像を、ブログのサイドバーに表示させる方法をメモしておきます。
    プラグインを使わず、テンプレートに直接コードを書く方法と、プラグインを導入する方法の二つを記しておきます。

    プラグインを使わず、アイキャッチ画像をサイドバーに表示する方法

    1.下図のように記事投稿欄に「アイキャッチ画像を設定」の項目があるか確認する。

    eye1WordPress3.0以降は標準装備になっているようですが、使用しているバージョンやテーマによっては、項目が設定されていない場合もあるようです。
    アイキャッチ画像の設定項目がない場合は、テーマのfunction.phpに以下のコードを追加して、アイキャッチ画像を機能させます。

     

     

     

     

     

    add_theme_support('post-thumbnails')

    2.アイキャッチに使いたい画像をアップして、「アイキャッチ画像として使用」をクリックする。

    eye3

    eye4上図のように記事投稿画面にアイキャッチ画像が表示されます。
    これをサイドバーの「最近の投稿」欄に画像＋投稿日＋タイトルといった感じで表示させたいと思います。

    3.テンプレートにコードを記述する。

    使用するテンプレートはテーマのsidebar.phpです。「最近の投稿」を表示したい場所に下記コードを挿入します。

    <div id="side-recent">
    <h3>最近の投稿</h3>
<ul>
<?php $myposts = get_posts('posts_per_page=9'); foreach($myposts as $post) : ?>
<li><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(50,50) ); ?><?php the_time('y.m.d') ?>&nbsp;<?php the_title(); ?></a>
</li> <?php endforeach; ?>
</ul>
<br style="clear:both;"></div>

    以下の赤色部分は任意変更可能です。
    ■　<div id=”side-recent“>・・・divのidは任意の名前
    ■　<h3>最近の投稿</h3>・・・任意の名前
    ■　posts_per_page=9　・・・数字は表示する「最近の投稿」数
    ■　<?php the_post_thumbnail( array(50,50) ); ?>・・・数字はアイキャッチ画像のサイズ。
    サイズを指定せず、<?php the_post_thumbnail( ) ); ?>と書けば、WordPressの管理画面にある初期設定「メディア」で指定したサムネイルのサイズになります。
    ■　<?php the_time(‘y.m.d‘) ?>　・・・日付のスタイル。WordPress Codex 日本語版「日付と時刻の書式」参照。

    4.スタイルシートに項目を追加する。

    テーマのstyle.cssに#side-recent （名前は任意）を追加して、「最近の投稿」欄のデザインを整えます。

    テンプレートをカスタマイズしてアイキャッチ画像を表示する方法については、下記のサイトを参考にさせていただきました。

    参照サイト:「http://節約主婦ブログ.jp/」の「WPのサイドバーに画像付記事リンクを設置」

    プラグインを導入して、アイキャッチ画像をサイドバーに表示する方法

    アイキャッチ表示関係のプラグインもいろいろあるようですが、ここではSimple Featured Posts Widgetを紹介します。ウィジェットでアイキャッチ画像付きの最近の投稿欄を作成してくれます。
    手順は

    • 1.プラグインの新規追加からSimple Featured Posts Widgetを検索してインストールする。
    • 2.インストールしたら有効化する。
    • 3.ウィジェット設定画面でSimple Featured Posts Widgetをサイドバーに設定する。
    • 4.Simple Featured Posts Widgetのスタイルシート（sfpw-style.css）を編集して、デザインを整える。（任意）

    アーカイブをクリックしてタイトルリストを表示する

    2010年6月29日 コメントをどうぞ

    「カテゴリをクリックしてタイトルリストを表示する」の続きです。
    昨日インストールしたプラグイン「Custom Posts Per Page」はアーカイブのタイトル一覧表示にも有効です。
    今度はarchive.phpを編集するのですが、私の使用しているテーマにはarchive.phpも無いので新規に作成します。
    昨日作成したcategory.phpをそのままarchive.phpと名前を書き替えて新規保存。サーバーにアップします。

    タイトルリストの表示数はプラグインの下記の数字を変更します。

    $posts_per[‘month’]     = 10;

    デフォルトでは月別アーカイブは10件になっているので、ここを自分の1ヶ月当たりの最大数を目安に変更するとよいと思います。