読者です 読者をやめる 読者になる 読者になる

色々でべろっぷ

WordPress、サーバー構築、プログラム等のメモ

Google XML Sitemaps

WordPress

bazubu.com

All In One SEO Packにも備わってるので、All In One SEO Packを使用しない場合などに使う。

WordPressのタイル状表示させる方法

WordPress

参考
http://nelog.jp/jquerymasonryWordpressの記事リストをギャラリーサイトのようにタイル状に隙間なくビッシリと表示させる方法


カスタム投稿をタイル状に一覧表示する。

jQueryライブラリのMasonryを利用して実装する。

ダウンロード先
http://masonry.desandro.com/Masonry


Masonryの呼び出し

functions.php

function init_mywp() {
…
…
	//各種スクリプト読込
	wp_enqueue_script('jquery'); //jQueryを呼び出していない場合は呼び出す。既に呼び出している場合は不要。
	//これ!
	wp_enqueue_script('masonry',get_bloginfo('stylesheet_directory') . '/js/masonry.pkgd.min.js', array(), false, true );
	//自分の作ったJSファイル
	wp_enqueue_script('miruahoweb',get_bloginfo('stylesheet_directory') . '/js/miruahoweb.js', array(), false, true );
}
add_action('init', 'init_mywp');//初期化時


Masonryで、ブロック要素を操作するためには、以下の2つの設定が必要。
・投稿リストを囲うコンテナ要素にIDをつける(classでも良いけど)
・投稿それぞれのブロック要素にclassを指定する


コンテナ要素:#tilelist
ブロック要素: .tile_part

リストを囲むコンテナ要素(#tilelist)の実装部分
front-page.php

				<?php $the_query = new WP_Query($args); ?>

				<div id="tilelist">
					<?php if($the_query->have_posts()): ?>
						<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

							<!-- /#これ! -->
							<?php get_template_part('entry-card'); ?>

						<?php endwhile; ?>

						<!-- /#これ! -->
						<div class="clearfix"></div>

					<?php endif ?>

				</div><!-- /#tilelist -->

			</div><!-- main -->


投稿のブロック要素(.tile_part)の実装部分
entry-card.php

<div class="tile_part">

	<div class="entry-thumb">
		<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
			<a href="<?php the_permalink(); ?>" class="entry-image"><?php the_post_thumbnail( 'thumb220', array('style' => 'width:220px;height:220px;') ); ?></a>
		<?php else: // サムネイルを持っていないときの処理 ?>
			<a href="<?php the_permalink(); ?>" class="entry-image"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/noimage.jpg" alt="NO IMAGE" title="NO IMAGE" style="width:220px;height:220px;" class="no-image list-no-image" /></a>
		<?php endif; ?>
	</div>

	<div class="entry-content">
		<h3><a href="<?php the_permalink(); ?>" class="entry-title"><?php echo get_the_title(); ?></a></h3>
		<p class="post-meta">
		<span class="post-date"><i class="fa fa-clock-o fa-fw"></i><?php the_time('Y/n/j') ;?></span>
		</p><!-- /.post-meta -->
		<p class="entry-snippet"><?php echo get_the_custom_excerpt( get_the_content(),150); //抜粋?></p>
		<p class="entry-read"><a href="<?php the_permalink(); ?>">記事を読む</a></p>
	</div>

</div>


サムネイルサイズを指定する
functions.php

function init_mywp() {
…
…
    // これ!
	add_image_size('thumb220',220,220,true);

スタイルシート
style.css

div.tile_part{
	text-align:center;
	width:233px;
	margin:10px 5px 0 5px;
	border:1px solid #ddd;
	border-radius:5px;
	float:left;
	clear:none;
}


jQueryでMasonryライブラリを呼び出すコード
miruahoweb.js

/* タイル表示 */
jQuery(function(){
	jQuery('#tilelist').masonry({ <!-- #tilelistは記事一覧を囲んでる部分 -->
		itemSelector: '.tile_part', <!--.tile_partは各記事を囲んでる部分-->
		isAnimated: true <!--アニメーションON-->
	});
});

Wordpressメモ

WordPress

ページごとの優先順位

ページの種類 優先順位1 優先順位2 優先順位3
トップページ home.php index.php
カテゴリー別アーカイブページ category.php archive.php index.php
タグ別アーカイブページ tag.php archive.php index.php
投稿日別アーカイブページ date.php archive.php index.php
検索結果 search.php index.php
投稿ページ single.php index.php
固定ページ page.php index.php
404ページ 404.php index.php


基本的な条件分岐タグ一覧

ページの種類 trueを返す条件分岐タグ
トップページ is_home()
カテゴリー別アーカイブページ is_category(), is_archive()
タグ別アーカイブページ is_tag(), is_archive()
投稿日別アーカイブページ is_date(), is_archive()
月別アーカイブページ is_month(), is_date(), is_archive()
年別アーカイブページ is_year(), is_date(), is_archive()
検索結果ページ is_search()
投稿ページ is_single()
固定ページ is_page()
404ページ is_404()


代表的なテンプレートタグ一覧
bloginfo(’name’)
サイトのタイトルを出力する。
bloginfo(’description’)
キャッチフレーズを出力する。
home_url()
トップページのURLを返す。
wp_title()
現在のページのタイトルを表示する。
get_template_directory_uri()
テンプレートファイルのあるディレクトリを返す
get_stylesheet_uri()
現状のテーマで使われているcssURI(パス)を返す。
the_title() [ループ中]
現在の投稿のタイトルを出力する。
the_permalink() [ループ中]
現在の投稿のパーマリンクURIを出力する。
has_post_thumbnail() [ループ中]
現在の投稿にアイキャッチ画像が設定されている場合はtrueを返し、アイキャッチ画像が無い場合はfalseを返す。
the_post_thumbnail() [ループ中]
現在の投稿のアイキャッチ画像のimgタグを出力する(引数にwidth、height、alt、classなどの属性情報を渡すことができる)。
the_category() [ループ中]
現在の投稿が属する全カテゴリーを、そのカテゴリーページへのリンク付きで出力する。
the_time() [ループ中]
現在の投稿の投稿日時を出力する。
the_content() [ループ中]
現在の投稿の本文を出力する(本文中にタグがある場合、それより前の内容のみを出力する)。
the_excerpt() [ループ中]
現在の投稿の抜粋文(htmlタグや画像は除外した最初の120語)を出力する。

出力する関数は勝手にechoまでしてくれる
取得するだけの関数は、戻り値としてその値が返ってくるだけなので自分でechoする必要ある(上記の説明文の「返す」と書いてあるのが取得する関数)


ループの全体像

<?php if(have_posts()): while(have_posts()): the_post(); ?>

<?php endwhile; else: ?>

<?php endif; ?>
if(have_posts()){
     <!-- 記事がある場合の処理 -->
     while(have_posts()){
          the_post();
     }
}else{
     <!-- 記事が無い場合の処理 -->
     
}

the_post()は、表示するべき記事群の中から、次の一記事についての情報(記事タイトルや本文や属するカテゴリー名など)を出力できる状態にセットする。
(具体的には、グローバル変数$postに一記事の情報を読み込む)

WordPressのメニューのリンクを新規タブで開く

WordPress

「target=”_blank」属性をつける方法

WordPressのメニュー画面の右上にある「表示オプション」をクリックし、
「詳細メニュー設定を表示」の項目のリンクターゲットにチェックを入れる。

するとカスタムメニューのリンク設定時に、
「リンクを新ウィンドウまたはタブで開く」という項目が表示されるようになるので、
チェックボックスにチェックを入れ保存。

Wordpressのパスワード保護ページをカスタマイズする

WordPress

「このコンテンツはパスワードで保護されています。
閲覧するには以下にパスワードを入力してください。」というテキストを編集する。
functions.phpに下記のコードを追加。

下の例は
・1ページ表示の時 と 一覧表示の時で見た目を分けている
・一覧表示の時にはURL表示

functions.php

function my_password_form() {
  $form = '';

  if(is_single()){
    $form = '<p>このコンテンツはパスワードで保護されています。<br>閲覧するには以下にパスワードを入力してください。<p>
    <p class="redline">&diams;パスワードの取得方法&diams;<p>
    <p class="red">すぐ下にあるバナーをクリックしていただき<br>メールアドレスを入力の上、メールマガジンに<br>ご登録していただくとすぐパスワードを通知します。<p>
    <form class="post_password" action="' . home_url() . '/wp-login.php?action=postpass" method="post">
    <input name="post_password" type="password" size="24" />
    <input type="submit" name="Submit" value="' . esc_attr__("パスワード送信") . '" />
    </form>';
  }else{
    $form = '<p>このコンテンツはパスワードで保護されています。<br>閲覧するには以下にパスワードを入力してください。<p>
    <p class="redline">&diams;パスワードの取得方法&diams;<p>
    <p class="red">すぐ下にあるURLをクリックしていただき<br>メールアドレスを入力の上、メールマガジンに<br>ご登録していただくとすぐパスワードを通知します。<p>
    <a href="http://なんとか/" target="_blank">http://なんとか/</a>
    <form class="post_password" action="' . home_url() . '/wp-login.php?action=postpass" method="post">
    <input name="post_password" type="password" size="24" />
    <input type="submit" name="Submit" value="' . esc_attr__("パスワード送信") . '" />
    </form>';
  }
  return $form;
}
add_filter('the_password_form', 'my_password_form');

Wordpress独自フォームでパスワード一括変更

WordPress PHP

Wordpressプラグインを使わずに、フォームを設置する

※functions.phpとthe_contentフィルターフックを利用してフォームを自作する方法
ttp://dim5.net/wordpress/development-registration-form.html

上のやり方ではなく、独自ショートコードを利用して外部PHPファイルを呼び出す方法

参考
Wordpressで独自ショートコード作成 - 色々でべろっぷ
Wordpressでセッションを使う - 色々でべろっぷ



・投稿記事のパスワードを一括変更する
・セッションを使った重複送信の制御
・新規パスワード入力フォームページ

passchange.php

<?php

if( is_page('passchange')){
  global $wpdb;

  // 管理者以上が必要
  if(!current_user_can('administrator')){
    echo "管理者以上の権限が必要です!";
    die();
  }

  // POST有りなら
  if( !empty($_POST)){
    if(!empty($_POST["pass"])){
      // セッションキーとチケットが一致しているどうか
      if ( $_SESSION['key'] and $_POST['ticket'] and $_SESSION['key'] == $_POST['ticket'] ){
        $rows = $wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_type = 'post' AND NOT post_password = '' ");
        $count = 0;
        foreach($rows as $row) {
          $id = $row->ID;
          $result = $wpdb->update( $wpdb->posts, array(
            'post_password' => $_POST["pass"],
          ), array(
            'ID' => $id,
          ), array('%s'), array('%d'));
          $count++;
        }
        $message = $count . "件、記事のパスワードを変更しました。<br>";
      }else{
        $message = '送信済みです。';
      }
    }else{
      $message = 'パスワードが空です。';
    }

    unset($_SESSION['key']);
    echo $message;
  }

  // ワンタイムチケットの生成とセッションへの保存
  $session_key = md5(sha1(uniqid(mt_rand(), true)));
  $_SESSION['key'] = $session_key;
?>

<h3>パスワード一括変更</h3>
<form name="form1" method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>">
  <input type="hidden" name="post_method" value="Y">
  <input type="hidden" name="ticket" value="<?php echo $session_key; ?>">
  <input type="text" name="pass" value="">
  <input type="submit" name="Submit" value="決定" />
</form>

<?php

}else{
  return $content;
}

?>

Wordpressでセッションを使う

WordPress

WordPress内のPHPでセッションを有効にするためには、「あらゆる出力に先立って、session_start() 関数をコール」すればよい。
これを実現するために、いろいろな方法が提案されているが、そのうちのふたつは以下のものである。

方法1: wp-config.php に次のcode を加える:

if (!session_id())
    session_start();


方法2: theme 内のfunctions.php に以下を付け加える:

function init_sessions() {
    if (!session_id()) {
        session_start();
    }
}
add_action('init', 'init_sessions');

Wordpressで独自ショートコード作成

WordPress

functions.php の適当な場所に以下のコード追加
これによって、PHPファイルを呼び出すためのショートコードを定義できる。

//ショートコード
function include_php_shortcode($atts) {
  global $original_array;
  ob_start();
  $original_array=$atts;
  get_template_part($original_array['slug']);
  return ob_get_clean();
}
add_shortcode("include_php", "include_php_shortcode");


エディター内に記述
例として、「includes/test.php」というファイルを呼び出したい場合は

[include_php slug="includes/test"]

エックスサーバーにWordpressをインストールする

WordPress

必要なもの
・ID
・PW
・ブログタイトル
・サーバーID
・(独自)ドメイン

ドメイン関係は時間かかるので早めに

PHPのバージョン切り替え
サーバーパネル > PHPのバージョン切り替え
PHP7.0.9選択

■取得した独自ドメインをXserverに設定
Xserverのインフォパネルにログイン
サーバーパネルにログイン
ドメイン設定
ドメインの追加設定」をクリック
取得済みのドメインURLを記載して、「ドメインの追加(確認)」をクリック
終了
ドメイン追加後、サーバーに設定が反映されるまで最大2日かかる(だいたい数時間)
ドメイン取得と設定は早めにやっておくのが吉


wordpress自動インストール
サーバーパネル > 自動インストール
自動インストールを設定するドメインを選択(独自ドメインを選択)
プログラムのインストール
完了後、DB関係の情報はメモしておく
※DBは自動で作成される

http://独自ドメイン/wp-admin/
からアクセス
ドメイン浸透具合で待ち時間 数時間~2日


FTP使えるようにしておく
サーバーパネル > FTPアカウントの追加
接続先ディレクトリ:未入力
FTP容量:0
WinSCP(FTPクライアント)で接続


プラグイン導入
・Akismet
スパムコメント防止
・WP Multibyte Patch
日本語使うのに必要
・MW WP Form
申し込みフォーム作成に必要
・TinyMCE Advanced
WordPressの投稿機能強化

今回、All in One SEO Pack はいらなかった。
テーマにすでにSEO機能あった
使用テーマ Xeory Base


■Xeoryインストール後の初期設定
Xeoryには取扱説明書があるのでそれ見て行う


■エックスサーバー独自SSLWordPressサイトをHTTPS化する
サーバーパネルに入り、左下から HTTPS 化したいドメインを選択
ドメイン」欄の「SSL 設定」に進む
ドメインを確認し、「独自 SSL 設定の追加」タブをクリック
再度ドメインを確認し、右下の「独自 SSL 設定を追加する(確定)」を押して終了

これでサーバー側の設定は終わりですが、この段階で「https://~」を見ても以下のような画面が表示されるだけ

「安全な接続ではありません」

SSL設定が反映するまで、最大1時間程度かかる


WordPress 管理画面に入ったら、[設定]>[一般]にある URL を 2 ヶ所変更
「http」を「https」にする
WordPress アドレス (URL)
・サイトアドレス (URL)
「変更を保存」をクリックすると自動的にログアウトするので、再度ログイン