Category

WordPress

アイキャッチ画像が設定されて無い時は、共通画像を設定する【WordPress】

By | WordPress, カスタマイズ, ホームページ制作

WordPressには、1つ一つの記事にアイキャッチ画像を1つ設定することができます。設定したアイキャッチ画像は、投稿した記事を一覧表示した際の見出し画像としてや、記事詳細のトップ画像などとして使えば、記事を目立たせることが出来ます。

アイキャッチ画像の設定がされてない場合、デフォルトでは空になり何も表示されず、間抜けな見た目になってしまうので、アイキャッチ画像の設定がない場合には、任意の画像が表示されるようにします。

一番簡単な方法はアイキャッチ画像を表示するプログラムにアイキャッチ画像がない場合の処理を追加します。

<?php
	if (has_post_thumbnail() )  {
		//アイキャッチ IDを取得して画像の「URL,横幅,高さ」を取得。
		$size = 'medium'; //thumbnail medium large full
		$image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), $size);
		//URLを返す
		$image_url = $image_url[0];
	} else {
		//アイキャッチがない場合は代替画像を表示。
		$image_url = 'https://placehold.jp/310x200.png';
	}
?>

これで、アイキャッチ画像の設定を忘れた場合にでも、設定した画像が表示され見た目が統一されます。

ただ、これだとアイキャッチを使用するところすべてにプログラムを記述する必要があり、一から作るん場合にはいいのですが、既存のサイトに後で追加する場合などは、修正抜けなどが起こる可能性があります。なのでfunctionで新規投稿の際に、アイキャッチにデフォルトの画像が設定されるようにします。

function default_thumbnail( $post_id ) {
    $post_thumbnail = get_post_meta( $post_id, $key = '_thumbnail_id', $single = true );
    $default_thumbnail_id = '5044';// 画像のポストIDを指定
    if ( !wp_is_post_revision( $post_id ) ) {
        if ( empty( $post_thumbnail ) ) {
            update_post_meta( $post_id, $meta_key = '_thumbnail_id', $meta_value = $default_thumbnail_id );
        }
    }
}

add_action( 'save_post', 'default_thumbnail' );

画像のidはメディアの一覧から指定したい画像の「添付ファイルの詳細」を開いた時のURLの「item=」横に記載されている数字になります。

最終的には、設定項目を管理画面に追加しそこで設定した画像が反映されるように制作すると後で画像の変更なども出来て快適にサイト運営を行うことが出来ます。

wordpress

wordpressのビジュアルエディターとテキストエディターの切り替え

By | その他

wordpressの投稿画面にはビジュアルとテキストの二つの編集モードが用意されています。 ビジュアルはTinyMCEというライブラリーが使われHTMLやCSSといったホームページ編集の知識がなくても簡単にページが作成できるように、ワードのような作成を補助する機能が、アイコンなどでわかりやすく用意されています。一方テキストはHTMLのソースコードをそのまま入力できより複雑で本格的なページを作成することができます。

それぞれ用途や編集能力によって使い分けができとても便利なのですが、ビジュアル・テキストで切り替えた場合TinyMCEとwordpressの自動整形で意図してない形に変換され崩れてしまいます。ビジュアルエディターの機能を外すことも出るのですが、クライアントは当然HTMLやCSSに不慣れな方が多いので好ましくありません。なので自動整形機能の一部を無効化します。

function override_mce_options( $editex_array ) {
    global $allowedposttags;

    $editex_array['valid_elements']          = '*[*]';
    $editex_array['ç'] = '*[*]';
    $editex_array['valid_children']          = '+a[' . implode( '|', array_keys( $allowedposttags ) ) . ']';
    $editex_array['indent']                  = true;
    $editex_array['wpautop']                 = false;
    $editex_array['force_p_newlines']        = false;

    return $editex_array;
}

add_filter( 'tiny_mce_before_init', 'override_mce_options' );

「valid_elements」「extended_valid_elements」で不正なコードとして削除されないものを設定します。上のコードでは*で全て保存されるようにしています。「valid_children」は親要素と要素の関係性を制御します。通常インライン要素の中にはブロックレベル要素を配置しないと言うルールがあるのですが、インライン要素であるaタグの中にブロックレベル要素を配置することがあります、この場合タグがブロックレベル要素の内側に配置し直されるのですが、これをしないようするように書いています。「wpautop」、「force_p_newlines」で段落の制御を無効に設定しています。これで影響は少なくなります。ただ完璧ではないので、切り替えを行う場合には気をつけてください。

WordPressで自動挿入される<p><br>をプラグインを使わずに無効(消す)方法

WordPressで自動挿入される<p><br>をプラグインを使わずに無効(消す)方法

By | WordPress

wordpressでサイトする際に一旦、HTMLソースコードだけでCSSなどの調整をしそのあとでwordpressの固定ページに反映し、必要プログラムを加えて調整していきます。しかし、固定ページへHTMLコードを反映し確認すると、行間やオブジェクトの間隔がずれることがあります。ソースコードを確認すると、入れたはずのない<p>や<br>が挿入されています。WordPressには自動整形機能と言って入力を補助してくれるとてもありがたく迷惑な機能があり、これのおかげでWordPressで<p><br>のタグを自動的に挿入されてしまいます。配置はすでに調整しているので、今更<p><br>を操作されれても迷惑なのででこれを無効にする方法を紹介します。

プラグインでの対応をよく見かけるのですが、何年も更新されずうまく動作しないものや、使うと別の不具合が出るものなどうまくいきません。

有名なもので「TinyMCE Advanced」がよく紹介されていますがどうも挿入じゃなく削除される対策のようで違うみたいです。ただ、プラグインをつかわくても簡単に対応することができます。

pege.phpなどのテンプレートで管理画面で入力したページの情報を出力する。

<?php the_content(); ?>

の前に自動形成を排除するフィルターを追加し

<?php remove_filter('the_content', 'wpautop'); ?>
<?php the_content(); ?>

と書くだけです。

機能自体が必要ない全体的に自動形成せずに出力したい場合は、functions.phpに次の一行を追加するだけです。

remove_filter('the_content', 'wpautop');