# ワードプレス(wordpress)
ブログ・お知らせ
ホームページやブログ更新が捗る
ツールとプラグイン
記事公開日:
最終更新日:
こんにちは、新潟のマザーシップウェブ制作事務所です。
ホームページやブログづくりで一番面倒なのは画像の扱い!
これらをすこしでもスムーズに、簡単にする方法を今回はブログに書きたいと思います。
ワードプレスで画像をアップロードする方法(デフォルト)
クラシックエディタの場合
画像を入れたい場所を選択したあと、入力画面上部の「メディアを追加」を押します。
「メディアを追加」ダイアログが出たら、「ファイルをアップロード」のタブを選し、「ファイルを選択ボタン」またはこちらの画面に任意の画像をドラッグして画像をアップロードします。
最後に右列から代替テキスト、タイトル、画像サイズ、リンク先などを整えてから、「投稿に挿入」します。
ブロックエディタの場合
任意の空白ブロックに「/」を入力すると「画像」というアイコンが出てくるのでこちらから画像を入力します。
画像アイコンをクリックしたあとは「アップロード」や「メディアライブラリ」ボタンからアップロードできます。
以降はクラシックエディタと同じです。
画像のアップロードをちょっと簡単にする方法
実は「メディアを追加」を使わなくてもPCのフォルダから編集画面にドロップするだけでもアップロード可能です。
ドラッグでアップロードした場合は鉛筆マークから代替テキストやサイズなど調整します。
ドラッグでアップロードした場合はサムネイルサイズで上がっている事が多く、そのまま公開すると画像が荒れてしまいますので、特に事情がなければ別のサイズにしたほうが良いです(サイトによりますが、中か大)
さらに簡単にする方法
ドラッグ&ドロップでアップロードで、通常はいいんですが、、
この方法は、一回自分のPCに画像をダウンロードして保存する必要があるんです。
…面倒ではありませんか?
例えば、旧サイトから新サイトに手動で入力移行するときなど。
例えば、スクリーンキャプチャーを取ったあとなど。
保存が面倒ですよね。コピーしてすぐにはりたいですよね?
そこで、画面からコピーした画像を直接ワードプレスに貼り付けするプラグインの紹介です。
プラグイン The Paste
サイトやエクスプローラから「画像をコピー」(ctrl+c)
「画像を貼り付け」(ctrl+v)
※ショートカットキーで貼り付けできない場合は、↓の画像の右クリックをお試しを。
鉛筆ボタンから代替テキストや画像サイズを調整します。
やはり、「サムネイルサイズ」で画像追加されている場合が多いので、サイトにもよりますが中・大に変更したほうが良いです。
これだけで作業完了します。一旦PCに保存するとかないのでサクサクで作業可能です。
メディアライブラリから同時に複数ペースト&アップロードできる!
さらにすごいのは、メディアアップロード画面からだとペースト(ctrl+v)で複数の画像を同時アップロードできるという点です。
拡張子やファイル名もアップロード画面から指定できます。
あまりにも大量にアップロードするとやはり管理画面が重くなってしまうのですが、10点くらいは同時にいけるので、サイトを移転するときや事例を乗せるサイトやECサイトなど、写真を多く使うブログで重宝すると思います。
というわけで、気になった方はインストールしてみてくださいね。
functions.phpを触ることができる方なら代替テキスト(Alt)入力も省略できます。
functions.phpに以下のタグを追加しましょう。
/* —————————-
■ alt自動追加 投稿名+サイトデスクリプション+サイト名
—————————- */
function auto_alt_filter($html) {
global $post;
$post_title = get_the_title();
$site_title = get_bloginfo(‘name’);
$site_desc = get_bloginfo(‘description’);
if ( $post_title !== ” ) {
$html = str_replace(‘alt=””‘, ‘alt=”‘.esc_attr($post_title).’|’.$site_desc.’|’.$site_title.'”‘, $html);
$html = str_replace(‘title=””‘, ‘title=”‘.esc_attr($post_title).’|’.$site_desc.’|’.$site_title.'”‘, $html);
}else{
$html = str_replace(‘alt=””‘, ‘alt=”‘.$site_title.'”‘, $html);
$html = str_replace(‘title=””‘, ‘title=”‘.$site_title.'”‘, $html);
}
return $html;
}
add_filter(‘the_content’, ‘auto_alt_filter’);
画像に代替テキストが入っている場合は、入力内容(入力した代替テキスト)が表示されて、
代替テキストが入っていない場合は、投稿名・サイトデスクリプション・サイト名が自動的に入るものです。
どうしても長くなるのでいらない部分は消していただければ。
投稿名だけaltになればいい場合は以下のようになります。
/* —————————-
■ alt自動追加 投稿名
—————————- */
function auto_alt_filter($html) {
global $post;
$post_title = get_the_title();
if ( $post_title !== ” ) {
$html = str_replace(‘alt=””‘, ‘alt=”‘.esc_attr($post_title).'”‘, $html);
$html = str_replace(‘title=””‘, ‘title=”‘.esc_attr($post_title).'”‘, $html);
}else{
$html = str_replace(‘alt=””‘, ‘alt=”‘.$site_title.'”‘, $html);
$html = str_replace(‘title=””‘, ‘title=”‘.$site_title.'”‘, $html);
}
return $html;
}
add_filter(‘the_content’, ‘auto_alt_filter’);
以上です。
皆様のホームページライフがよりスムーズになることを応援します!