川崎市のホームページ制作 ワードプレス構築	 VR画像を張って見る 動画編川崎市のホームページ制作 ワードプレス構築	 VR画像を張って見る 静止画編川崎市のホームページ制作 ワードプレス構築	 ワードプレスのカスタムフィールドで登録した画像をサムネイル表示させる方法川崎市のホームページ制作 ワードプレス構築	 ワードプレス管理画面の文字を変更する川崎市のホームページ制作 ワードプレス構築	 レビュー待ちの投稿がされた場合に管理者にメールを送信。川崎市のホームページ制作 ワードプレス構築	 寄稿者権限のユーザにも画像アップロードを・・・川崎市のホームページ制作 ワードプレス構築	 カスタムタクソノミーでの検索フィルター川崎市のホームページ制作 ワードプレス構築	 サムネイル画像のサイズ指定を出力しない川崎市のホームページ制作 ワードプレス構築	 投稿一覧画面での表示項目の編集川崎市のホームページ制作 ワードプレス構築	 カスタムフィールドに登録した画像をサムネイル画像として出力する



川崎市のホームページ制作 ワードプレス構築	 VR画像を張って見る 動画編川崎市のホームページ制作 ワードプレス構築	 VR画像を張って見る 静止画編川崎市のホームページ制作 ワードプレス構築	 ワードプレスのカスタムフィールドで登録した画像をサムネイル表示させる方法川崎市のホームページ制作 ワードプレス構築	 ワードプレス管理画面の文字を変更する川崎市のホームページ制作 ワードプレス構築	 レビュー待ちの投稿がされた場合に管理者にメールを送信。川崎市のホームページ制作 ワードプレス構築	 寄稿者権限のユーザにも画像アップロードを・・・川崎市のホームページ制作 ワードプレス構築	 カスタムタクソノミーでの検索フィルター川崎市のホームページ制作 ワードプレス構築	 サムネイル画像のサイズ指定を出力しない川崎市のホームページ制作 ワードプレス構築	 投稿一覧画面での表示項目の編集川崎市のホームページ制作 ワードプレス構築	 カスタムフィールドに登録した画像をサムネイル画像として出力する

コラム

VR画像を張って見る 動画編
VR画像を張って見る 静止画編
ワードプレスのカスタムフィールドで登録した画像をサムネイル表示させる方法

記事一覧にサムネイルを表示させるパターンはよくあります。
ですが、ワードプレスの場合通常はアイキャッチ画像を使うので、記事内に表示させる画像の他にアイキャッチ画像として登録する手間が生じてしまいます。
自身のサイトならなんてことはない手間ですが、クライアント様に納品するシステムとしては
「カスタムフォールドに登録した画像を、アイキャッチ画像にも登録してください」と言うのが、なんともダサイ気がしてなりません。
そのこで表示側のソースを通常のアイキャッチ画像の表示ソース

<?php the_post_thumbnail(‘thumbnail’); ?>

これを

<?php echo wp_get_attachment_image(get_post_meta($post->ID, ‘カスタムフィールド値’, true),’thumbnail’); ?>

に変更することで、カスタムフィールドの画像が正方形トリミングされ出力されます。

 

後はCSSでwidthを任意のサイズ、heightをautoに指定します。

 

たったひと手間ですが、納品物のクオリティーが上がる気がします。

ワードプレス管理画面の文字を変更する

ワードプレス制作の覚え書きとして、自分のために記録しています。
どなたか、ご同業で参考にされる方がいらっしゃいましたらお役に立ててください。

ワードプレスの管理画面には様々な文字があります。
しかし、もとの英文をワードプレスが日本語に翻訳しているので、なんとなくわかりづらい言葉もあります。
管理者は慣れているので問題ありませんが、ワードプレスでホームページを作りクライアント様に納品時に操作説明する際に、直感的にわかりやすい言葉のほうがよろしいかと思います。

例えば、、、

「新規追加」 ⇒「記事を追加」
「ダッシュボード」 ⇒ 「各種お知らせ」
「メディアを追加」 ⇒ 「画像を追加」
画像投稿時の「画像を選択する」などは、画像アップロードした時点ですでに選択状態にあるのですから、「画像を埋め込む」とかのほうが分かりやすいと思います。

それではfunction.php内に、強引に翻訳を変更する記述をいれます。
(ただし、これはたぶん力わざですが・・・^^;)

 

function custom_gettext( $translated, $text, $domain ) {
$custom_translates = array(
‘default’ => array(
‘新規追加’ => ‘記事を追加’,
‘ダッシュボード’ => ‘各種お知らせ’,
‘メディアを追加’ => ‘画像を追加’,
‘画像を選択する’ => ‘画像を埋め込む’,
)
);
if ( isset( $custom_translates[$domain][$translated] ) ) {
$translated = $custom_translates[$domain][$translated];
}
return $translated;
}
add_filter( ‘gettext’, ‘custom_gettext’, 10, 3 );

function trans_custom_gettext() {
$args = func_get_args();
$translated = $args[0];
$text = $args[1];
$domain = array_pop( $args );
$translated = custom_gettext( $translated, $text, $domain );
return $translated;
}
add_filter( ‘gettext_with_context’, ‘trans_custom_gettext’, 10, 4 );
add_filter( ‘ngettext’, ‘trans_custom_gettext’, 10, 5 );
add_filter( ‘ngettext_with_context’, ‘trans_custom_gettext’, 10, 6 );

レビュー待ちの投稿がされた場合に管理者にメールを送信。

ワードプレス制作の覚え書きとして、自分のために記録しています。
どなたか、ご同業で参考にされる方がいらっしゃいましたらお役に立ててください。

寄稿者ユーザーを持つワードプレスの場合、寄稿者が投稿しても管理者の承認が必要となります。
その際に、デフォルトでは管理者が常にレビュー待ちの記事がないかチェックしなくてはなりません。
これは面倒ですね。

レビュー待ちの記事が投稿がされた場合、管理者にメールで知らせるようにしましょう

=========================================================

function.php

function mail_for_pending( $new_status, $old_status, $post ) {
// 投稿がレビュー待ち以外からレビュー待ちに変わった(新規の場合は$old_statusが’new’、$new_statusが’pending’になります)
if ( $old_status != ‘pending’ && $new_status == ‘pending’ ) {
// ブログ名(サイト名)
$blogname = wp_specialchars_decode(get_option(‘blogname’), ENT_QUOTES);
// 投稿名
$post_title = wp_specialchars_decode($post->post_title, ENT_QUOTES);

// 送信先(管理者)
$to = get_option(‘admin_email’,’user_email’);
// 件名
$subject = “[{$blogname}] 承認待ちの投稿が投稿されました({$post_title})”;
// 本文
$message = “承認待ちの投稿「{$post_title}」が投稿されました。確認をお願いします。\r\n”;
$message .= “\r\n”;
$message .= “編集および公開: \r\n”;
$message .= wp_specialchars_decode(get_edit_post_link( $post->ID ), ENT_QUOTES) . “\r\n”;

// メールを送信
$r = wp_mail( $to, $subject, $message );
}
}
add_action( ‘transition_post_status’, ‘mail_for_pending’, 10, 3 );

寄稿者権限のユーザにも画像アップロードを・・・

ワードプレス制作の覚え書きとして、自分のために記録しています。
どなたか、ご同業で参考にされる方がいらっしゃいましたらお役に立ててください。

複数のユーザーで記事投稿するような運営の場合、投稿者を寄稿者権限にして内容を管理者が精査し、承認するというパターンもあります。

その際に、面倒なのが、なぜかワードプレスの寄稿者は画像アップロードの権限がないのです。
不特定多数のユーザーを持つブログなどはこの方が安全ですが、例えば社内の複数の人間で運営する場合などは信頼できるユーザーなので画像のアップロード権限を持っている方がスムースですね。
この場合、寄稿者にも画像アップロードが出来るような記述があります。

下記をfunction.phpに追加します。

=============================================================

if ( current_user_can(‘contributor’) && !current_user_can(‘upload_files’) ){
add_action(‘admin_init’, ‘allow_contributor_uploads’);
}

function allow_contributor_uploads() {
$contributor = get_role(‘contributor’);
$contributor->add_cap(‘upload_files’);
}

 

これで寄稿者も画像をアップロードすることができます。

カスタムタクソノミーでの検索フィルター

ワードプレス制作の覚え書きとして、自分のために記録しています。
どなたか、ご同業で参考にされる方がいらっしゃいましたらお役に立ててください。

管理画面の記事一覧にある絞込フィルターは「日付」と「カテゴリー」だけです。
しかし、カスタム投稿で作った自前のカスタムタクソノミーはこのカテゴリーの絞込に表示されません。

下記がfunction.phpに追加するカスタムタクソノミー用の絞込フィルターの増設です。

========================================================

function add_post_taxonomy_restrict_filter() {
global $post_type;
if (‘カスタム投稿名’ == $post_type) {
?>
<select name=”カスタムタクソノミー名”>
<option value=””>全てのエリア</option>
<?php
$terms = get_terms(‘josanlistcat’, ‘orderby=term_group’);

//親タクソノミーの名称を取得して配列を変更
foreach ($terms as $term) {
if ($term->parent > 0) {
$parents = get_term($term->parent, ‘カスタムタクソノミー名’);
$parent = $parents->name . ” “;
$term->name = $parent . ” ” . $term->name;
} else {
$term->name = $term->name;
}
}

//親タクソノミーの名称を含んだ名前でソート
function compareArray($a, $b) {
if ( $a->name < $b->name ) return -1;
if ( $a->name > $b->name ) return 1;
return 0;
}
uasort($terms, “compareArray”);

foreach ($terms as $term) {
//タクソノミーを選んだときにselectedがつくようにする
if ($term->slug === $_REQUEST[‘josanlistcat’]) {
$selected = ” selected”;
} else {
$selected = “”;
}
//親タクソノミーが変わったら区切り線をいれる
if ($term->parent == 0) {
?>
<option>——————–</option>
<?
}
?>
<option value=”<?php echo $term->slug; ?>”<?php echo $selected; ?>><?php echo $term->name; ?></option>
<?php
}
?>
</select>
<?php
}
}

登録タームが親子関係にあれば、セレクトボックス内も2階層で表示されます。

サムネイル画像のサイズ指定を出力しない

ワードプレス制作の覚え書きとして、自分のために記録しています。
どなたか、ご同業で参考にされる方がいらっしゃいましたらお役に立ててください。

アイキャッチ画像に登録したサムネイルをそのまま出力すると、<img>タグ内にwidthとheghtの指定サイズが書き込まれてしまいますね。
このため、CSS側でサムネイル画像のサイズを指定しても思うようにいきません。

function.phpにこのサムネイルのサイズの書き出しを行なわない記述を追加すれば解決します。

=========================================================
/* サムネイルのサイズ出力を消す */
add_filter( ‘post_thumbnail_html’, ‘custom_attribute’ );
function custom_attribute( $html ){
// width height を削除する
$html = preg_replace(‘/(width|height)=”\d*”\s/’, ”, $html);
return $html;
}

=========================================================

投稿一覧画面での表示項目の編集

ワードプレス制作の覚え書きとして、自分のために記録しています。
どなたか、ご同業で参考にされる方がいらっしゃいましたらお役に立ててください。

管理画面の投稿一覧ページでは、デフォルトで「投稿者」「タグ」「コメント数」などが表示されていますが、これってクライアント様に渡すときに必要あるとは思えないのです。
逆に、特定のカスタムフィールド値などが表示されていたほうが記事の選別がしやすいと言うパターンが多々あります。

一覧表示での表示項目を編集する記述をfunction.phpに書き込みます。

=========================================================

表示項目の削除
function delete_column($columns) {

unset($columns[‘tags’],$columns[‘comments’],$columns[‘date’]);
//….のように消したいキーをunset

return $columns;
}
add_filter( ‘manage_posts_columns’, ‘delete_column’);

=========================================================

カスタムフィールド項目の追加

function manage_posts_columns($columns) {
$columns[‘カスタムフィールド値1’] = “カスタムフィールド値1”;
$columns[‘カスタムフィールド値2’] = “カスタムフィールド値2”;
return $columns;
}
function add_column($column_name, $post_id) {
if( $column_name == ‘カスタムフィールド値1’ ) {
$stitle = get_post_meta($post_id, ‘カスタムフィールド値1’, true);
}
if( $column_name == ‘カスタムフィールド値2’ ) {
$stitle = get_post_meta($post_id, ‘カスタムフィールド値2’, true);
}
if ( isset($stitle) && $stitle ) {
echo attribute_escape($stitle);
} else {
echo __(‘None’);
}
}
add_filter( ‘manage_posts_columns’, ‘manage_posts_columns’ );
add_action( ‘manage_posts_custom_column’, ‘add_column’, 10, 2 );

このように表示項目を増やしていけます。

 

カスタムタクソノミー項目の追加

記事がどのカテゴリーに属するかを一覧で見たい場合は、カスタムタクソノミーの所属タームを表示させます

function add_custom_column( $defaults ) {
$defaults[‘カスタム投稿名’] = ‘カスタムタクソノミー名’;
return $defaults;
}
add_filter(‘manage_josanlist_posts_columns’, ‘add_custom_column’);
function add_custom_column_id($column_name, $id) {
if( $column_name == ‘カスタム投稿名’ ) {
echo get_the_term_list($id, ‘カスタム投稿名’, ”, ‘, ‘);
}
}
add_action(‘manage_josanlist_posts_custom_column’, ‘add_custom_column_id’, 10, 2);

function my_pre_get_posts($query) {
if (is_category()) {
$query->set(‘order’, ‘ASC’);
}
}
add_action(‘pre_get_posts’, ‘my_pre_get_posts’);

 

カスタムフィールドに登録した画像をサムネイル画像として出力する

ワードプレス制作の覚え書きとして、自分のために記録しています。
どなたか、ご同業で参考にされる方がいらっしゃいましたらお役に立ててください。

例えば、フォトギャラリーなどを作るときに、サムネイル一覧を並べておいて、画像クリックで元サイズの画像を表示させる場合など、カスタムフィールフィールドとアイキャッチ画像の両方に同じ画像を登録するのは面倒です。

その場合、カスタムフィールドに登録した画像のサムネイルを出力するためには、フロント側の記述を変更します。

フィールド値が「画像1」だった場合

<img src=”<?php the_field( ‘画像1’,$post->ID); ?>”>
これは、フィールドの返り値をURL指定していれば画像がそのまま表示されます。

上記を
<?php echo wp_get_attachment_image(get_post_meta($post->ID, ‘画像1′, true),’thumbnail’); ?>
にすることで、画像1 のサムネイルが表示されます。

・・・で、よく見ると元画像を出力するときと違い、<img>タグは書きません。
この場合、<img>タグ込みで出力されます。
<imgの中に、width=”*****px” heght=”*****px” とサイズしてされてしまいますが、これはHTMLですので、CSSでサイズを指定しなおしてやればCSSのほうが優先されます。

例)
<div class=”image”>
<?php echo wp_get_attachment_image(get_post_meta($post->ID, ‘画像1′, true),’thumbnail’); ?>
</div>

<style>
.image{
width:100px;
}
.image img{
width;100%;
height:auto;
}
これで横幅100pxのサムネイルの表示となります。
ちなみにheightでautoを指定してあげないと高さだけもとのサムネイルのサイズで出力されてしまいます。

 

ホームへ戻る

当社へのお問合せ
有限会社 テクニカルプロデュース

- 本社 -
神奈川県 川崎市中原区 小杉町1-533

- 制作オフィス -
神奈川県 横浜市都筑区 茅ケ崎東3-18 お電話でのお問合せ メールでのお問合せ