motoyamayuki.com

Blog

WordPressでパスワード保護している投稿ページの本文以外も非表示にする方法

2015.08.02

クライアントへの確認などでパスワード保護を利用することがありますが、その際に困る点として

・the_content 以外の部分は表示されてしまう
・記事一覧ではパスワード保護されている投稿も表示される

この2点があります。
今回は、前者の問題を解決する方法をご紹介します。
後者のカスタマイズは「WordPressでパスワード保護している投稿を一覧から除外する方法」をご覧ください。

やりたいこと

WordPressの設定で、公開状態を「パスワード保護」にした記事の記事ページで、the_content以外の部分も非表示にしたい。

 

解決方法

下記のようなコードでタイトルと本文を表示させているとします。

<article>
  <header>
    <h1><?php the_title(); ?></h1>
  </header>
  <div><?php the_content(); ?></div>
</article>

それを、下記のように書き換えます。

<?php if( !post_password_required( $post->ID ) ) : //パスワードが不要、あるいはパスワードが正しいとき ?>
  <article>
    <header>
      <h1><?php the_title(); ?></h1>
    </header>
    <div><?php the_content(); ?></div>
  </article>
<?php else: //パスワードが必要あるいはパスワードが間違っているとき ?>
  <?php echo get_the_password_form(); ?>
<?php endif; //パスワードチェック終了 ?>

すると、タイトルと本文がともに非表示になります。

順番に説明していきます。
post_password_required関数は、投稿がパスワードを必要としているかどうかをチェックします。必要としている場合にtrueを返すので、それを利用して、パスワードが必要な投稿と不要な投稿を分岐させます。

本来であれば、the_contentがパスワード保護かどうかをチェックしているので、パスワードが必要なときはパスワード入力フォームが表示されるのですが、今回はパスワードが必要なときはthe_contentを呼び出していないので、パスワード入力フォームを表示させる必要があります。
get_the_password_formは、パスワード入力フォームのHTMLテキストを返しますので、それをechoして表示させます。

上記のコードではタイトルと本文を非表示にしますが、もうページごと表示させなくてもいいよ!という場合は、

<?php if( !post_password_required( $post->ID ) ) : //パスワードが不要、あるいはパスワードが正しいとき ?>
  <?php get_header(); ?>
  <div id="main">
    <div class="content">
      <?php while ( have_posts() ) : the_post(); ?>  
        <article>
          <header>
            <h1><?php the_title(); ?></h1>
          </header>
          <div><?php the_content(); ?></div>
        </article>
      <?php endwhile; ?>
    </div>
    <?php get_sidebar(); ?>
  </div>
  <?php get_footer(); ?>
<?php if( !post_password_required( $post->ID ) ) : //パスワードが不要、あるいはパスワードが正しいとき ?>
  <?php echo get_the_password_form(); ?>
<?php endif; //パスワードチェック終了 ?>

このようにしちゃえば、パスワード入力フォーム以外は何も表示されなくなります。

パスワード保護された投稿のページで本文以外にも非表示にしたい項目がある、というのはけっこう需要あるカスタマイズだと思うんですが、解説されているブログが少なかったので書いてみました。

どなたかのお役に立てれば幸いです。

  • このブログをはてなブックマークに追加
WordPressでパスワード保護している投稿を一覧から除外する方法

2015.07.22

クライアントへの確認などでパスワード保護を利用することがありますが、その際に困る点として

・the_content 以外の部分は表示されてしまう
・記事一覧ではパスワード保護されている投稿も表示される

この2点があります。
今回は、後者の問題を解決する方法をご紹介します。

前者のカスタマイズは「WordPressでパスワード保護している投稿ページの本文以外も非表示にする方法」をご覧ください。

 

やりたいこと

WordPressの設定で、公開状態を「パスワード保護」にした投稿は、記事一覧ページなどのアーカイブから除外したい。
exclude

 

解決方法

どのようにして記事一覧を表示させているかによりますが、archive.phpやcategory.phpで表示させている場合は、functions.phpに下記のコードを追記します。

/* pre_get_posts */
function customize_main_query ( $query ) {
  if ( ! is_admin() || $query->is_main_query() ) { //管理画面以外 かつ メインクエリー
    if ( $query->is_archive() ) {
      $query->set( 'has_password', false );
    }
  }
}
add_action( 'pre_get_posts', 'customize_main_query' ); // pre_get_postsにフック

pre_get_postsフィルターを使って、取得する投稿データを調整します。
パスワード関連のパラメーターに”has_password”というものがあり、これを使ってパスワード保護されている投稿かどうかが判定できます。

“has_password”が”false”。つまり、「パスワード保護されていない投稿だけ取得してね」という設定にします。
これで、パスワード保護された投稿はアーカイブページから除外されます。

もしトップページや固定ページで、get_postsを使用して投稿一覧を取得している場合も考え方は同じですので、

・”product”というカスタム投稿タイプ
・新着10件を表示
・パスワード保護された投稿は除外

このような条件の投稿を取得したい場合、下記のようなコードで実現できます。

<ul>
  <?php
      $args = array(
      'post_type' => 'product',
      'numberposts' => 10,
      'has_password' => false,
    );
    $postslist = get_posts( $args );
    foreach ($postslist as $post) : setup_postdata($post);
  ?>
  <li>
    <a href="<?php the_permalink(); ?>">
      <?php the_title(); ?>
    </a>
  </li>
  <?php endforeach; ?>
</ul>

 

パスワード保護された投稿を除外したい、というのはけっこう需要あるカスタマイズだと思うんですが、解説されているブログが少なかったので書いてみました。

どなたかのお役に立てれば幸いです。

  • このブログをはてなブックマークに追加
WordPressでコメントを新着順に表示させつつページ分割もおこなう方法

2015.07.22

WordPressでコメント機能を応用してBBS(掲示板)をつくりました。
そのときにけっこう悩んだポイントがあったので、解決方法をメモがてら。

 

実現したいこと

・コメントを降順(新しいものが上)で表示
・5件ごとにページ分割
という表示方法を実現したい。

もっと具体的に説明すると、例えばコメントが12件あった場合、

【1ページ目】12,11,10,9,8
【2ページ目】7,6,5,4,3
【3ページ目】2,1
という表示にしたい。
(数字が大きいほど、最新のコメント)

 

色々と試したこと

ここで厄介なのは、ページ分割。
もしページ分割をしないのであれば、管理画面の設定だけで対応できます。

管理画面の「設定」→「ディスカッション」より
・”新しい”コメントを各ページのトップに表示する

これでOKです。
ただ、ページ分割をしたい場合は、さらに

・(チェック入り)1ページあたり”X”件のコメントを含む複数ページに分割し、”最初”のページをデフォルトで表示する

この設定もする必要があります。
(Xは1ページに表示するコメント数です。お好きな数をどうぞ)
この設定をした場合、どういう表示になるかと言いますと、

先ほどと同じくコメントが12件あった場合、
【1ページ目】5,4,3,2,1
【2ページ目】10,9,8,7,6
【3ページ目】12,11
という表示になります。ダメですね。

同じく管理画面の「設定」→「ディスカッション」より
・”最後”のページをデフォルトで表示する
に設定するとどうなるか。【3ページ目】がまず表示されるだけです。
解決にはなりません。

 

 

解決方法

コメントの表示は

<?php wp_list_comments(); ?>

でおこないます。

そもそも、wp_list_comments関数が、昇順での出力にしか対応していないところが原因だと思います。
そこで、functions.phpに下記のコードを追加します。

//コメントを降順で表示
function wp_desc_comments($comments) {
    return array_reverse($comments);
}
add_filter ('comments_array', 'wp_desc_comments');

array_reverseという配列関数を使用して、コメントの順番を逆にした新しい配列を返します。
これにより、コメントが降順になりました。

その上で、管理画面の「設定」→「ディスカッション」の設定を

・(チェック入り)1ページあたり”X”件のコメントを含む複数ページに分割し、”最初”のページをデフォルトで表示する
・”古い”コメントを各ページのトップに表示する

というようにします。
ここでポイントは「古いコメント」にすることです。
functions.phpに追記したコードでコメントの順番が昇順から降順に変わりましたが、WordPress側はそれを知りませんので、”新しい”と”古い”が逆になっています。
つまり、”古い”にすると、”新しい”コメントが上に表示されます。

wp_list_commentsの引数でこのあたりも指定できるようになれば嬉しいですね。
ちなみに’reverse_top_level’という引数がありますが、これは管理画面「ディスカッション」での
・”新しい”コメントを各ページのトップに表示する
と同じ設定ですので、今回の問題の解決にはなりません。

どなたかのお役に立てば幸いです。

 

  • このブログをはてなブックマークに追加
画像アップローダーで投稿のURLを非表示にする方法

2011.08.02

wordpressで画像をアップする際に使うアップローダーで、
画像に張るリンク先を選ぶボタンには

「なし」「ファイルのURL」「投稿のURL」

という3つから選べます。

 

  • なし…リンクを張らない
  • ファイルのURL…オリジナル画像へのリンク
  • 投稿のURL…画像アタッチメントページへのリンク

という違いですが、今まで「投稿のURL」を使ったことがありません。あるいはLightbox系のプラグインを使っている場合はオリジナル画像へのリンクにならないと困ります。
そこで、「投稿のURL」のボタン自体をなくしてしまおうと思います。

まずは、ブラウザからサイトURLの後ろにwp-admin/options.phpをつけてアクセスし
image_default_link_typeの項目を「file」にしておきましょう。

 

アップローダー関連は
wp-adminincludesmedia.phpで制御してるようですので覗いてみましょう。

(WPver.3.2.1)
928~948行目に

function image_link_input_fields($post, $url_type = '') {<br /><br />	$file = wp_get_attachment_url($post->ID);
	$link = get_attachment_link($post->ID);<br /><br />	if ( empty($url_type) )
		$url_type = get_user_setting('urlbutton', 'post');<br /><br />	$url = '';
	if ( $url_type == 'file' )
		$url = $file;
	elseif ( $url_type == 'post' )
		$url = $link;<br /><br />	return "
	<input class="text urlfield" name="attachments[$post->ID][url]" type="text" value="&quot; . esc_attr($url) . &quot;" /><br />	<button class="button urlnone">" . __('None') . "</button>
	<button class="button urlfile" title="&quot; . esc_attr($file) . &quot;">" . __('File URL') . "</button>
	<button class="button urlpost" title="&quot; . esc_attr($link) . &quot;">" . __('Post URL') . "</button>
";
}

 

という記述があります。それっぽいですね~。
ためしに

<button class="button urlpost" title="&quot; . esc_attr($link) . &quot;">" . __('Post URL') . "</button>

を削除してみましょう。

お!消えましたねー。

でもソースコードを直接いじるのよくない!ということでthemesフォルダ内のfunctions.phpに書くことにしましょう。

add_filter('attachment_fields_to_edit',  'new_attachment_fields_to_edit', 1,  2);
function new_attachment_fields_to_edit($fields, $post){
        if (substr($post->post_mime_type,0,5) == 'image'){
                $html = "<input class="text urlfield" name="attachments[$post->ID][url]" type="text" value="&quot; . esc_attr(array_shift( wp_get_attachment_image_src($post->ID, " /><br />                                <button class="button urlnone">" . __('なし') . "</button>
                                <button class="button urlfile" title="&quot; . esc_attr(wp_get_attachment_url($post->ID)) . &quot;">" . __('フルサイズ') . "</button>
";
                $fields['url']['html'] = $html;
        }
        return $fields;
}

 

これを適用させると

これで画像をアップした際に「投稿のURL」ボタンがなくなりました。

 

ちなみに、リンクURLを中サイズや大サイズにしたい場合は

add_filter('attachment_fields_to_edit',  'new_attachment_fields_to_edit', 1,  2);
function new_attachment_fields_to_edit($fields, $post){
        if (substr($post->post_mime_type,0,5) == 'image'){
                $html = "<input class="text urlfield" name="attachments[$post->ID][url]" type="text" value="&quot; . esc_attr(array_shift( wp_get_attachment_image_src($post->ID, " /><br />                                <button class="button urlnone">" . __('なし') . "</button>
                                <button class="button urlfile" title="&quot;.esc_attr(array_shift( wp_get_attachment_image_src($post->ID, ">中サイズ</button>
                                <button class="button urlfile" title="&quot;.esc_attr(array_shift( wp_get_attachment_image_src($post->ID, ">大サイズ</button>
                                <button class="button urlfile" title="&quot; . esc_attr(wp_get_attachment_url($post->ID)) . &quot;">" . __('フルサイズ') . "</button>
";
                $fields['url']['html'] = $html;
        }
        return $fields;
}

 

としてください。すると

このように選択項目が増えます。
環境に合わせてカスタムしてください。

多機能なのは便利ですが、まぎらわしい項目を見せなくすることも大切ですね。

  • このブログをはてなブックマークに追加
floatでボックスを並べる時に左右ピッタリ、中は隙間を空けるcss

2011.02.07

何がしたいかと言うと、

こういうレイアウトを考えているとします。

背景がグレーのボックスにサムネイル画像が9枚並んでいますね。

floatでずら~っと並べるのが一般的かと思いますが、サムネイルのボックスにつけたclassに一括でmarginを指定すると

こういう感じになり、両端か片端に隙間が空いてしまいます

隙間を空かないようにするには、端にくるボックスにのみ違う指定をしてあげればいいのですが、
「ループ処理で表示させている」、「ECサイトのシステムなどで個別にclass名をふることが出来ない」
という状況がちょいちょい訪れます。

そこで、サムネイルボックスに同じcss指定をしつつ、左右ピッタリに並べる方法を紹介します。 (さらに…)

  • このブログをはてなブックマークに追加
WordPressのメニューバーをcssロールオーバー+条件分岐で3パターン切り替え

2011.02.01

メニューバーの画像を全部つなげた1枚だけ作成し、ロールオーバーはcssのbackground-potisionで行う技。
↓こういう画像を用意して、動作指定はサクっとcssでやっちゃうやつです。

便利ですよね。メリットとしては

  • 画像が1枚で済む
  • マウスオーバーでの読み込み時に一瞬白くなるチラツキがなくなる
  • jsを使わなくて済む
  • htmlコードがシンプルになる

いや~良いことずくめだ。

上の画像は「通常」と「マウスオーバー」の2種類だけですが、当然のごとくわき出る要望として

「今いるページの部分だけはリンクをはずして色を変えたい」

↓こういうことですよね。

でもでも!これをWordPressで実装しようと思うと、ある問題に引っかかります。
WordPressではテーマファイル内のheader.phpにメニューバーの記述をしている場合がほとんどなので
すべてのページに同じメニューバーが表示されちゃいます。

そこで使うのが条件分岐

はい、サクッとコード書きます。

(さらに…)

  • このブログをはてなブックマークに追加
xampp+WordPressでマルチサイト化する時にポート番号で引っかかった時の対処法

2011.01.17

はい、タイトルのまんまです。

「xamppをVirtualHostで複数サイトを管理してて、特に問題なかったけどWP3.xを導入してマルチサイト化もしてみたら、なんと!ポート番号80以外のサイトはネットワークの作成が出来ないじゃないか~!」

という、恐ろしくニッチな悩みに対する解決法です。

(さらに…)

  • このブログをはてなブックマークに追加

Contact

お仕事のご依頼、面白いことのお誘い、一度お話してみたい!などなど、鬼頭祐毅へのお問い合わせは、下記のフォームよりお願いします。送信後、 info@motoyamayuki.com より確認のメールが届きます。

お問い合わせフォーム

    お名前

    メールアドレス

    内容

    Treble