とりあえずfunctions.phpに書いとくと便利かもしれないシリーズ【WordPress】

今年の雪は急にやってきたりいなくなったり、忙しい天気ですね。
WordPressのカスタマイズをしていて、なんだか毎回functions.phpに同じこと書いてることが増えたので備忘録代わりに。
定番のものから小ネタまで。

ソースコード周り

remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'wp_shortlink_wp_head');
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head');

ど定番ですがまぁ。定番ってことは便利ってことです。

固定ページ名をbodyのクラス名として追加

function pagename_class($classes = '') {
if(is_page()) {
    $page = get_post(get_the_ID());
    $classes[] = $page->post_name .' page_' .$page->post_name;
}
return $classes;
}
add_filter('body_class','pagename_class');

ページ名のクラスがあったほうがCSS書く時便利ですからね。

CSS、Javascriptの読み込み

function theme_enqueue_styles() {
    // 親テーマのstyle.css
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    // 子テーマのstyle.css
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

これは子テーマでテーマを作っていく場合になりますが。

親テーマの不要なCSSを削除

function my_dequeue_styles() {
    wp_dequeue_style( $handle );
}
add_action( 'wp_enqueue_scripts', 'my_dequeue_styles', 9999 );

逆に親テーマのCSSで不要なCSSを読み込みたくない時に。
$handle探すのに手間取ったりもしますが。。

ダッシュボード関連

自動で入力されるPタグを入れない。

if(is_page()){
    remove_filter('the_content', 'wpautop');
    remove_filter('the_excerpt', 'wpautop');
}

記事(POST)はお客さんが使うことも考慮して固定ページにしました。

ウィジェットエリアを追加

function my_widgets(){
    register_sidebar(array(
        'name' => 'ウィジット名', 
        'description' => 'テキストテキストテキストテキストテキスト',
        'id' => 'widgetID',
        'class' => 'className',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ));
}
add_action('widgets_init', 'my_widgets');

追加したら利用したい場所に

<?php
    dynamic_sidebar( $number );
    // $numberはサイドバーの名前または ID。
?>

投稿の画像相対パスを絶対パスに書き換え

function replaceImagePath($arg) {
    $content = str_replace('"images/', '"' . get_stylesheet_directory_uri() . '/images/', $arg);
        return $content;
}
add_action('the_content', 'replaceImagePath');

ソースをペタッとWordPressに貼り付けて、あれれ、相対パスが切れた。をなくすよう。
自分のテーマディレクトリの直下にimagesフォルダがある場合です。
パスは適宜変更してください。
小ネタですが以外と便利です。

サイト名のショートコード

function shortcode_siteurl() {
    return home_url() .'/';
}
add_shortcode('siteurl', 'shortcode_siteurl');

これも上と似たようなもんですが、WordPressのテキストエディターでリンク貼ったりする時に。
自分ではあんまりショートコードは使わないんですけど。
いろいろな人が使う場合はあると重宝することがあります。

小ネタ

Advanced Custom Fieldsで画像のパスを取得(ID利用)

function get_afc_imgurl($slug){
    if(get_field($slug)){
        //画像(返り値は「画像ID」)
        $img = get_field($slug);
        $imgurl = wp_get_attachment_image_src($img['id'], 'full'); //サイズは自由に変更   

        return $imgurl[0]; 
    }
}

基本はthe_field()だけで出力できちゃうお手軽さもAdvance Custom Fieldプラグインの魅力の一つ。
画像の時(IDを利用している場合)にパスの出力忘れることが多かったので関数にしてみました。

感想

簡単なものばかりですけど。
最近はset_query_var()で変数をget_template_part()に渡してget_query_var()で受けてごにょごにょっていうのがちょっとお気に入りです。
固定ページの内容なんかもファイル切り分けてページモジュールみたいにしちゃうと結構楽で。

やり方は人それぞれだと思います、何か使えそうなものがあったらどうぞご利用ください。


WordPressの投稿画面をカスタマイズしよう!!

どうもKazです。
実は、画像加工の記事を準備していましたが
もう少々お待ちいただくとして…

今回は、Wordpressの管理画面にCSSを当てるコツを
自分への備忘録としても書きたいと思います。

一番カスタマイズを必要とするところと言ったらカスタム投稿部分になるかと思います。
そして、だいたいお決まりでAdvanced Custom Fieldsプラグインをインストールしていると思いますので、プラグインを使う前提で説明いたします。

まずは管理画面で専用のCSSを読み込むようにします。

functions.phpへ

function my_admin_style(){
wp_enqueue_style( 'my_admin_style', [管理画面用cssのフルパスURL]);
}
add_action( 'admin_enqueue_scripts', 'my_admin_style' );

※「admin_enqueue_scripts」が管理画面への指定になっていますので、管理画面以外ではこのCSSが読み込まれません。

これで管理画面にCSSファイルを読み込ませることができましたので
マークアップの説明に移ります。

基本的に管理画面全てに読み込まれますので
CSSのリセットから書体の指定まで行うことができます。

カスタム投稿部分のみ指定する場合ですが、
Advanced Custom Fieldsプラグインを使うと、入力ページのbodyタグに
■ bodyタグ 「post-type-[ポスト名]」
のタグが付きますので、基本的な設定はこのタグを基本に行うと良いでしょう。

また、各入力項目タイトルと入力項目を1セットとして
■ 入力項目エリア 「field_key-field_[英数字]」
と言うクラスが振られていますので各項目ごとの設定は、このタグを指定してみてください。
一括で指定する場合は「label」にスタイルを設定してもいいです。

入力項目には
■ 入力項目 「acf-field-[フィールド名]」
と言うidが振られますので、CSSを当てやすい感じになります。
もしくは「input」に対して設定をしてもいいです。

背景画像なども使っていくと、初めての方でも入力しやすい登録画面ができますし
レスポンシブなスタイルにも対応できますので
一手間加えて使いやすい画面にしましょう!!


コンタクトフォーム7で画像などファイルを送る。(添付ファイルの送信)

みんな大好きContact Form 7です。(3回目)
agnblog_20161015_02
前回はファイルの受信でしたが、逆にフォームから問い合わせてきた人に確認メールと合わせて、添付ファイルを送りたいケースもありますよね。
例えば資料請求フォームで、請求と同時にPDFファイルを自動的に送るとか。需要はあると思います。

そこでContact Form 7です。(いつもお世話になっております。)
受信だけでなく、サーバー上のファイルを添付しての送信も最初から対応しています。

受信メール設定場所
コンタクトフォームの編集→「該当のフォーム」→「メール」のタブagnblog_20161015_01 「ファイル添付」の欄に添付ファイルの場所を書きます。

[wp-contents]フォルダから下のパスを記載するか、サーバーのフルパス(絶対パス)で記載します。(httpからURLを書いてもダメです。)
フルパスがわかればサイト内の何処に置いてあるファイルでも構いません。よくわからなければ、WordPressダッシュボードのメディアでアップするのがいいでしょう。

先方の受け取り環境のこともあるので、あまり大きなファイルを添付しないようにしましょう。最大でも5MBぐらいが現実的ではないでしょうか?
フォームの作成時にその旨を記載しておくのが親切ですね。


コンタクトフォーム7で画像を送って貰う。(ファイル添付)

みんな大好きContact form 7の記事です。
(いつも使わせて頂いております。ありがとうございます。)

サイトに問合せフォームを付けたときに、画像などファイルを受け取りたいことが、あると思います。先日クライアントの工務店さんから「見積を出すのに、フォームから現場の写真を送ってもらえるようにしたいんだよね。」 などとのご要望がありまして、WordPressのフォームによる添付ファイルの送信について調べてみました。

Contact Form 7には初めから、画像を含む各種ファイル添付用のタグが用意されていますので、簡単に付けられます。まずフォームの設定(フォームタブ)画面です。

agnblog_20161014_02

ここで添付ファイルの種類とサイズに制限をかけられます。
詳しくはオフィシャルサイトで
http://contactform7.com/ja/file-uploading-and-attachment/
(…この記事不要です…)

次に受け取り設定(メールタブ)の画面です。
agnblog_20161014_03
ファイル添付のエリアにタグを書き込みます。
あとはフォームを固定ページに貼って送って貰うだけ!
agnblog_20161014_01

 受信すると、指定のアドレスにメール添付の形で画像が届きます。
注意点としては、添付ファイルは一時的にサーバーにアップロードされますが、フォルダの属性(パーミッション)などで書き込み禁止になっていると添付に失敗します。立ち上げたばかりで設定中のWordPressにありがちなミスです。
スマホの場合
・レスポンシブを意識してテーマを選んで作ればスマホ対応です。
・スマホだと画像選択時にカメラを選び、その場で撮影→添付の流れが実現できます。
(画像はandroidですが、iOSでも大丈夫。)
agnblog_20161014_04
業務によっては、画像のやり取りができると大幅に省力化に繋がることもあると思います。上手く活用したいですね♪