今回は「functions.php」でJavaScriptを読み込む方法について紹介します。

WPのJavaScriptの読み込みを管理する

早速JavaScriptを読み込んでいきましょう。

WPのJavaScriptの読み込む基本的な書き方

JavaScriptの基本的な書き方は、下記になります。
パスは、読み込みディレクトリのパスに合わせて変更してください。

functioncustom_print_scripts() {
wp_enqueue_script('common-js', get_template_directory_uri() . '/common/js/common.js', '', '', true );
}
add_action('wp_print_scripts', 'custom_print_scripts');

「wp_enqueue_script」の5番目の引数を指定なしの場合「wp_head()」に出力、「true」の場合は、「wp_footer()」に出力されます｡

JavaScriptファイルを指定ページだけで読み込む

if文で指定ページだけで読み込みも可能です。
ページのスラッグやIDで指定します。

functioncustom_print_scripts() {  //sampleページで読み込む  if(is_page("sample")) {
wp_enqueue_script('sample-js', '/パス/', '', '', true );  }
}
add_action('wp_print_scripts', 'custom_print_scripts');

全ページに必要なもの以外は、ファイルを分けておくことで余計な読み込みを回避できます。

WPのアイキャッチ画像を表示する方法

WordPressのテーマの制作したりカスタマイズするには必須のコード！
では早速やっていこう！

アイキャッチ画像を表示

シンプルに投稿のアイキャッチ画像を表示させることができるタグです。
デフォルトでアイキャッチを表示させるタグが用意されているので、楽ですね。
ただこれだけだと画像がアイキャッチに設定されていない場合何も表示されません。

<?php the_post_thumbnail(); ?>

なので基本的には下の「アイキャッチがある場合、ない場合で処理を分ける方法」を使用することが多いです。

アイキャッチがある場合、ない場合で処理を分ける方法

if文で分岐することで、アイキャッチ画像がある場合はアイキャッチを表示し、ない場合は事前に指定している画像を表示する事ができます。

<?php
  // アイキャッチがある時の処理
  if(has_post_thumbnail()){
    the_post_thumbnail();
　}else{
  //アイキャッチがない場合
?>
　　<img src="<?php echo get_template_directory_uri(); ?>/img/xx.jpg" alt="No image" />
<?php
 } ?>

WPのプロフィール写真をプラグインで変更する

では早速プラグインをインストールしてみましょう。
今回プロフィールの写真を変更するのに使用するプラグインは「WP User Avatar」。
こちらを使用することで、簡単にプロフィール写真を変更することができます。

「WP User Avatar」

上記のリンクからプラグインのデータをダウンロードしてきてもいいですが、WPの管理画面のプラグインから検索できるのでそちらから選んだほうが簡単にインストールできます。

プラグイン→新規追加→検索欄に「WP User Avatar」を入力するとか気が出てくると思います。

こちらをインストールし、有効化してください。

作業は以上で完了！

プロフィールの写真をを設定する

WP管理画面から「ユーザー」→「変更するユーザーをクリック」→「プロフィール写真」で画像を設定します。

このブログでも使用していて、各記事の下部で表示させています。

こんな感じ！
簡単に実装できるので、ぜひプロフィール写真を変更してみてください！

JavaScriptなどを使えば、押したときぬるっと表示なんかもできますが、実装がめんどくさかったのでCSSだけで実装できる形で今回は実装しました。
一瞬で実装できるので、カテゴリー欄を親カテゴリーだけにしたい方は参考になると思います。

WPのカテゴリー一覧の小カテゴリーを隠してhoverすると表示されるようにする方法

今回実装したCSSはこんな感じ！

.widget_categories ul li  a + ul {
	display:none;
}
.widget_categories ul li:hover ul {
	display:block;
}

基本的に小カテゴリーは隠しておいて、ホバーされたら表示してねという簡単な感じに実装しました。
多分どんなテーマでも対応可能だと思うので、WPのウィジェットにカテゴリー欄を表示させた際に、小カテゴリーも出て見栄えが悪いという方は参考にしてみてください。

WP管理画面メニューに固定ページを追加する方法

では早速、WP管理画面メニューに固定ページを追加してみましょう。

追加するには、function.phpに下記コードを貼り付けます。

<?php
function add_page_to_admin_menu() {
  add_menu_page( '追加ページ', '追加ページ', 'manage_options', 'post.php?post=10&action=edit', '', 'dashicons-book-alt', 3);
}
add_action( 'admin_menu', 'add_page_to_admin_menu' );
?>

・「追加ページ」は管理画面に表示される部分に表示されるので任意で変更してください。
・「dashicons-book-alt」と書かれている部分は、WPのアイコンの設定です。
・「post.php?post=10&action=edit」に書かれている数字は固定ページのIDを指定しているので、表示させたいページのIDを確認して変更してください。

これをFTPにアップすることで、WPをの管理画面メニューに固定ページを追加することが可能になります。
※「function.php」のバックアップを必ず取って実装しましょう。

WPをより使いやすく使おうぜ！

「依頼」の場合「hoge1@hoge.com」
「お問い合わせ」の場合「hoge2@hoge.com」
など、内容によってメールアドレスを振り分けて管理する際に役立ちます。

セレクトボックス・ラジオボタンなど選択によってメールの受信先を分ける方法

では早速「MW WP Form」を使って選択肢によってメールを分ける方法を紹介していきます。
これはすでにプラグイン「MW WP Form」をインストール・有効化・１つのメールアドレスで受信できる状態になっていることを前提に進めていきます。
設定や作成がまだの人は先にフォームを作成しましょう。

メールの受信先を分ける

WPテーマの「function.php」に下記コードをコピペしてください。
※間違ったり余計な部分を消してしまった場合、エラーでサイトが真っ白になったりします。
作業前には必ずバックアップをとって行いましょう。

[php]
add_filter( ‘mwform_admin_mail_mw-wp-form-xxx’, ‘mwform_change_mail_recipient’, 10, 3 ); //「xxx」にフォームのショートコートの数字を入力
function mwform_change_mail_recipient( $Mail, $values, $Data ) {
$data_type = $Data->get( ‘hogehogehoge’ ); name指定
switch ( $data_type ) {
case ‘hogehoge’: //セレクトボックスの名前を入力
$Mail->to = ‘hoge@hoge.con’; 受信メールアドレスの設定
$Mail->cc = ‘hoge@hoge.con’; //ccも追加する場合は記載
break;
}
return $Mail;
}
[/php]

１行目の「xxx」はどのフォームに適用するか指定します。ショートコートに書かれている数字を入力してください。
３行目でセレクトボックス等のnameを指定します。
５行目で３行目で指定したなかの「hogehoge」にチェックが入ったとき行われる設定
６行目で受信するメールアドレスを指定します。
７行目ccが必要な場合は入力してください。
必要ない場合は削除してください。
５〜８行目を複製すると復数の指定が可能です。

以上！
簡単にセレクトボックス・ラジオボタンなど選択によってメールの受信先を分けることができます。
webサイト作成の役に立てば幸いです。

single.phpで前後のタイトルとリンクを別々に取得する方法

では早速、WordPressのsingle.phpで次の記事と前の記事の情報を取得していきましょう。

基本的には、下記で取得できちゃいます。
[php]
<?php previous_post_link(); ?> //前の記事
<?php next_post_link(); ?> //次の記事
[/php]

ただこれだけでは、ちょっとデザインが変わると対応が難しいですよね。
なので、リンクと前の記事、次の記事のタイトルを別々に取得します。

前の記事のリンクを取得

まずは、前の記事のリンクを文字列のして取得してみます。
[php]
<?php
$prevpost = get_previous_post();
if( !empty( $prevpost ) ) {
$prevurl = get_permalink( $prevpost->ID );
}

echo $prevurl; //URL出力
?>
[/php]

こんな感じ。
これで、前の記事のリンクだけを取得することができます。

これにタイトルも同時に取得してみましょう。
[php]
<?php
$prevpost = get_previous_post();
if( !empty( $prevpost ) ) {
$prevurl = get_permalink( $prevpost->ID );
$prevttl = get_the_title( $prev_post->ID );
}

echo $prevurl; //URL出力
echo $prevttl; //タイトル出力
?>
[/php]

次の記事のリンクを取得

続いて次の記事のリンクを文字列のして取得します。
[php]
<?php
$nextpost = get_next_post();
if( !empty( $nextpost ) ) {
$nexturl = get_permalink( $nextpost->ID );
}

echo $nexturl; //URL出力
?>
[/php]

こちらもタイトルも同時に取得してみましょう。

[php]
<?php
$nextpost = get_next_post();
if( !empty( $nextpost ) ) {
$nexturl = get_permalink( $nextpost->ID );
$nextttl = get_the_title( $next_post->ID );
}

echo $nexturl; //URL出力
echo $nextttl; //タイトル出力
?>
[/php]

こんな感じ！

「Intuitive Custom Post Order」を併せて使う際の注意

記事を自由に並び換えできる「Intuitive Custom Post Order」と併せて使う場合に上記の方法は注意してください。
プラグイン「Intuitive Custom Post Order」と併せて使用してしまうとリンクとタイトルがめちゃくちゃな順番になってしまいます。
解決方法は調査中ですが、多分記事投稿順で取得してそう・・・？
なぜかリンク先がおかしい・・・となったら「Intuitive Custom Post Order」の可能性があるので確認してみましょう。

ここでは、カテゴリ名のみ、カテゴリのリンクのみの取得もできるので個別で取得したい時にも役立ちます。

カテゴリ名とリンクを取得する方法

では早速WordPressのカテゴリを取得していきます。

カテゴリを取得

現在のカテゴリを取得するだけの場合は、下記の書き方だけで取得できます。
[php]
<?php the_category(); ?>
[/php]

カテゴリ名のみ取得

今回はカテゴリ名のみ表示してみます。
[php]
<?php
$cat = get_the_category(); $catname = $cat[0]->cat_name;
?>
<?php echo $catname; ?>
[/php]

これでリンクのない状態で、カテゴリの名前のみ取得できます。

リンク（URL）のみ取得する

カテゴリのリンクのみ取得します。
この書き方だと複数カテゴリを指定している場合、1つしかリンクを取得できません。
[php]
<?php
$cat = get_the_category(); $cat_id = $cat[0]->cat_ID;
$link = get_category_link($cat_id);
?>
<?php echo $link; ?>
[/php]

カテゴリって制作でもよく使うので、いろいろな取得方法、表示方法を知っておくと役立ちますね。

レスポンシブサイトを印刷する際にスマホ表示になってしまう問題を解決する

では、早速問題を解決していきます。
今回の原因として、レスポンシブサイトのメディアクエリの書き方です。

普段レスポンシブサイトで使用しているメディアクエリ

普段レスポンシブサイトで使用しているメディアクエリはこちら。
[css]
@media (max-width:640px){
}
[/css]

この書き方の場合、SPの表示になってしまうようです。
そこで、今回は下記の書き方に変更することで、今回の問題であるレスポンシブサイトの印刷時にPCで印刷することができるようになります。

印刷時PC表示にするためのメディアクエリ

[css]
@media only screen and (max-width: 640px){
}
[/css]

これだけ！
簡単ですね！

テーマ内にある画像を短いパスで表示する方法

固定ページでは、基本的にPHPやWordPressのテンプレートタグは使用することができません。
そこでfunction.phpを編集し、短いパスで画像を表示できるようにしていきます。

何もしていないときのパスの書き方

<img src="http://〇〇/wordpress/wp-content/themes/使用しているテーマ/img/○○.jpg">

※ディレクトリ構成によって変わります。

function.phpを編集

それでは実際にfunction.phpを編集します。
下記コードをfunction.phpの最後に追記してください。

function img_replace_filter($content){
$content = str_replace('"img/', '"' . get_bloginfo('template_directory') . '/img/', $content);
return $content;
}
add_filter('the_content','img_replace_filter');

これだけで短いパスで表示することが可能です。
「img」から始まるときは、それ以降のパスを書くだけでリンクされるようになっています。

function.php編集後の画像パス

では実際に画像のパスを書いてみます。

<img src="img/○○.jpg">

以上！
短く、わかりやすく画像パスを書くことができます。
楽ちんだぜー！