WordPress:仮想環境でプラグインやテーマの更新ができない時にSSHプラグインを使って解決

プラグインの更新で仮想環境時に毎回現れる画面

レンタルサーバのエックスサーバーやロリポップ利用時には出現しなかったものの
仮想環境や会社のサーバを利用すると「接続情報を入力」画面がでるように・・・

入力してもうまくいかない

プラグインを更新—_WordPress
とりあえず入力できるものはして「FTP」を選んでもエラーに。
「FTPS」を選んでもエラーに。

ターミナルからSSHでサーバには入ることができる

サーバに入ることはできるのでパスワードはあっているはず。

SSHを選ぶ場所がないのでプラグインを入れる

SSH SFTP Updater Supportの追加

どうやら、WordPressのデフォルトだとSSHを選ぶことが出来ないらしいのでプラグインをいれることに。
プラグインを追加_—_WordPress

↑通常のWordPress管理画面からのインストールはできません。
それで現在困っているのですから・・・・

画面上からではなくファイル転送ソフトを利用


(画面はCoda)
直接、フォイル転送ソフトを使ってプラグインを
/wp-content/plugins/
の下に放り込みます。

プラグイン_WordPress
管理画面に表示されたら「有効」に。

SSHを選んで更新

プラグインを更新__WordPress
更新設定画面に行くと「SSH2」の表示が増えています。
必要事項入力し「SSH2」を選択して「開始」を押すと
無事更新ができました。

ポート番号が違う場合

ポート番号が通常と異なる場合はホスト名の後にコロンを付けてポート番号を追加します。
例)xxxxx:123

WPプラグインAlpine PhotoTile for Instagram:Instagramの投稿写真をWordPressブログに埋め込む方法

フッターにインスタグラムの写真を載せたい

※序章が長いのでやり方だけ知りたい人は真ん中あたりから読み始めてください。

最近はじめた写真が楽しいInstagram

Twitter大好きなので、アカウントを趣味に応じて使い分けてる私。
Instagaramは複数アカウントの切替が簡単にできないので今まで避けていました。

が、なんだか、Instagramユーザーが増えてる

(facebookから友達が利用し始めました的なのがよくくる)

&もっとたくさんの共有の趣味の人と繋がりたい
と思い、Instagramを始めることに。

投稿したInstagramはTwitterと連携

IFTTTというツールでInstagramで投稿した写真は
Twitterに流れるように設定。
(そもそもInstagramから簡単に連携はできるのだけれど、
TwitterのTL上に写真が自動で表示されないので。)
方法はまたこんど。

写真メインのブログはInstagramの併用がおすすめ

Instagramを使い初めて思ったのは、タグをとにかくつけておくと、
自分が投稿した写真に関連のある他の人が投稿した写真を簡単に
しかも沢山見ることができるのが、思っていたよりよい。

例えば、ハイビスカスを投稿した時に #ハイビスカス と 英語で
#hibiscusとつけておくと

#hibiscus

#hibiscus

簡単に沢山見ることできる!
しかも日本にとどまらず世界中の人と。

rabbit

rabbit

写真を見て楽しむので言葉がわからなくても問題ないですよね。

ガーデニングとビオトープを楽しんでいる私として
かなりはまってます。

自力で作成を考えたけれどやっぱりプラグインで・・・

さて、いざInstagramをWordPressブログ内で表示しようとした時に、
いろいろぐぐりました。

Instagram APIを取得してWebサイトと連携し、投稿写真を自動に掲載する方法
instagramのフィードをサイトに取り込むのに手こずった件。【導入編】

このあたり。
で、、、も。
なんだか難しくて・・・・(・∀・)

プラグイン使う事にしました。

方法だけみたい方はこちからプラグイン:Alpine PhotoTile for Instagram

半年前に使っていた記憶があるんです。
ただ、サイトがすごく重くなって辞めた記憶が・・・

でも、ギャラリー風の表示ができ、やりたい事に一致するの
もう一度チャレンジすることにしました。

Instagram側ので設定

Instagramデベロッパーサイトから設定

http://instagram.com/developer
↑から設定します。

Instagram_Developer_Documentation

Residter your Application をクリック

Developer_Signup_•_Instagram_Developer_Documentation

Your website:Instagramを連携するサイトURL
Phone number:電話番号
What do you want to build with the API?(APIを何に使う?):
「A plugin for my wordPress website. 」でOKのよう。
よくわからず私はWEBSITEと記入しちゃいました。

規約にチェックを入れて「Sign up」をクリック

最初の画面に戻るのでManage_Clients_•_Instagram_Developer_Documentation

 

今度はResister a New Client をクリック

 

Register_a_Client_•_Instagram_Developer_Documentation 2必要事項入力していきます。
WordPressのプラグイン設定の画面で何を記入していいか記載されてます。
(後述のWordPress側での設定を参照)

Application Name:連携させるサイトのタイトル
Description:「Alpine PhotoTile for Instagram WordPress plugin」
Website:サイトURL
Redirect URI:

AlpineTile__Instagram_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress 2

WordPress設定画面に表示されている上記赤枠を入力

すべて入力後Resisterをクリック。

Manage_Clients_•_Instagram_Developer_Documentation 2上記が表示されればOK。
次はWordPressプラグイン画面での設定へ。

WordPress側ので設定

プラグインを追加_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress
Alpine PhotoTile for Instagram をインストール。
プラグイン_‹_ぽちのベランダガーデニングとビオトープ_—_WordPressプラグインを有効にした後に「Add User」をクリック。

AlpineTile__Instagram_‹_ぽちのベランダガーデニングとビオトープ_—_WordPressAlpineTile__Instagram_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress 2いろいろと設定方法が英語で書かれています。

先ほどInstagramの設定でてきた

Redirect URLに記載する内容がこちらに書かれています。
赤字をコピペでOK。

AlpineTile__Instagram_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress 3

Instagramの設定で取得したCLIENT ID と CLIENT SECRETをそのままコピペ。
Add and Authorize New User をクリック。

Authorization_Request_—_Instagram

Authorize をクリック

AlpineTile__Instagram_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress 4

無事登録完了です。

ウィジット登録

ウィジェット_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress
外観>ウィジットを見ると
Alpine PhotoTile for Instagram ができています。

ウィジェット_‹_ぽちのベランダガーデニングとビオトープ_—_WordPress 2

 

写真の枚数や、写真の形、サイズ、もろもろを好みに設定。

PLANTS___ぽちのベランダガーデニングとビオトープ

無事設定出来ました!

Syntax Highlighter for WordPressの||ショートコード

ソースコードをきれいに表示するプラグインといえばSyntax Highlighter

使えそうなショートコード


2013年4月出版のこの本を読んで、へーっと思ってやってみたけれど、
効かないのでなんでだろ?と思ったら、
なくなってたりするのかも。

結局、
ダッシュボード>設定>Syntax Highlighterの一番下を確認するのが
スマートかと。
SyntaxHighlighterの設定_‹_30女未経験からのWEBプログラミング_—_WordPress
いろいろあったけど、使えそうなのは
ハイライト位?

新規投稿を追加_‹_30女未経験からのWEBプログラミング_—_WordPress
こんな風に「highlight」を使って書くと、ハイライトされる。

highlight — ハイライトする行番号のカンマ区切りのリスト。範囲を指定することもできます。 例: 2,5-10,12

<?php
global $post;
$args = array(
    'post_type' =>'カスタム投稿タイプ名',
    'posts_per_page' => 3,
    'tax_query' => array(
        array(
            'taxonomy' => 'タクソノミー名',
            'field' => 'slug',
            'terms' => 'ターム名'
        )
    )
);

参考にした本ではhighligh_linesになっていて、効かなかった。

Syntax Highlighter for WordPressの||ショートコード

ソースコードをきれいに表示するプラグインといえばSyntax Highlighter

使えそうなショートコード


2013年4月出版のこの本を読んで、へーっと思ってやってみたけれど、
効かないのでなんでだろ?と思ったら、
なくなってたりするのかも。

結局、
ダッシュボード>設定>Syntax Highlighterの一番下を確認するのが
スマートかと。
SyntaxHighlighterの設定_‹_30女未経験からのWEBプログラミング_—_WordPress
いろいろあったけど、使えそうなのは
ハイライト位?

新規投稿を追加_‹_30女未経験からのWEBプログラミング_—_WordPress
こんな風に「highlight」を使って書くと、ハイライトされる。

highlight — ハイライトする行番号のカンマ区切りのリスト。範囲を指定することもできます。 例: 2,5-10,12

&amp;amp;lt;?php
global $post;
$args = array(
    'post_type' =&amp;amp;gt;'カスタム投稿タイプ名',
    'posts_per_page' =&amp;amp;gt; 3,
    'tax_query' =&amp;amp;gt; array(
        array(
            'taxonomy' =&amp;amp;gt; 'タクソノミー名',
            'field' =&amp;amp;gt; 'slug',
            'terms' =&amp;amp;gt; 'ターム名'
        )
    )
);

参考にした本ではhighligh_linesになっていて、効かなかった。

WordPressプラグイン:||All-in-One Event Calendarで||スケジュール管理

つい先日、
音楽サイトに

THE EVENTS CALENDAR
を使ってカレンダーを埋め込みましたが、

All-in-One Event Calendar

今回は、


こちらの本に、他のスケジュール管理のプラグインがあったので
ガーデニングサイトに入れてみた。

All-in-One Event Calendar
からダウンロード

日本語化

All-in-One Event Calendar 日本語化。
日本語化ファイルは↑で入手。

2つの違い

SCHEDULE___ぽちのベランダガーデニングとビオトープ
ALL-IN-ONEの方がGoogle Calendarまんまという感じ。

種をまこう___ぽちのベランダガーデニングとビオトープ
ちゃんと個別ページも勝手にできる。

ウィジット表示機能

PLANTS___ぽちのベランダガーデニングとビオトープ
近い予定を自動的にウィジットに表示してくれる機能が
なかなかよいかも。

見た目を除けば、
ALL-IN-ONEの方が使いやすそう。

WordPressプラグイン:||All-in-One Event Calendarで||スケジュール管理

つい先日、
音楽サイトに

THE EVENTS CALENDAR
を使ってカレンダーを埋め込みましたが、

All-in-One Event Calendar

今回は、


こちらの本に、他のスケジュール管理のプラグインがあったので
ガーデニングサイトに入れてみた。

All-in-One Event Calendar
からダウンロード

日本語化

All-in-One Event Calendar 日本語化。
日本語化ファイルは↑で入手。

2つの違い

SCHEDULE___ぽちのベランダガーデニングとビオトープ

ALL-IN-ONEの方がGoogle Calendarまんまという感じ。

種をまこう___ぽちのベランダガーデニングとビオトープ

ちゃんと個別ページも勝手にできる。

ウィジット表示機能

PLANTS___ぽちのベランダガーデニングとビオトープ

近い予定を自動的にウィジットに表示してくれる機能が
なかなかよいかも。

見た目を除けば、
ALL-IN-ONEの方が使いやすそう。

WordPressプラグイン:||WP slab Text||を使ってみると


この本から気になったプラグイン

WP slab Text
2年程更新されてないようで、
ダッシュボードで検索してもヒットせず。

WP slabText
こちらからダウンロード

「||」パイプ2本で好きなところに改行がいれられる!

新規投稿を追加_‹_30女未経験からのWEBプログラミング_—_WordPress
有効にすることを忘れずに。

WordPressプラグイン:WP_slab_Textを使ってみると___30女未経験からのWEBプログラミングしっかりタイトルに効いていて楽しい!

注意

この設定したまま、ツイートをしようと思うと、
class設定が追加されてるものが吐出されちゃう。
Twitter_でリンクを共有する

なので、結局これは使えないかも・・・

WordPress:THE EVENTS CALENDARイベントカレンダーページの作製

どうやるんだろう?と思っていたら、この本にたまたま載っていた。

使用するプラグイン

THE EVENTS CALENDAR

12月_2014_のイベント__
カレンダー表示(月)やリスト、DAY(日)を選んで表示を切り替えることが可能。

日本語化するには

The Events Calendar 使用方法 解説!

を参考にして、管理画面を日本語化することが可能。

参考図書には、土日に色づけする方法あり。
プロ版にすると、機能がだいぶ拡張されるらしい。

私が使っているプラグインまとめ

サイトを作っている時に、既存のサイトみながら入れているのが面倒なので、まとめる。

必ずいれているもの

不具合改善

WP Multibyte Patch
本家版、日本語版 WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行う

コメント・セキュリティもの

Akismet
既存のプラグインで、スパムコメントをブロックしてくれる。らしい。

編集に便利なエディタもの

AddQuicktag
HTMLエディターやビジュアルリッチエディターで定型入力に使用できるクイックタグを簡単に追加・管理

サイト外観・便利機能

Auto Post Thumbnail
過去の記事も、これから投稿する記事も、全て自動でアイキャッチを設定

参考URL:アイキャッチ自動設定プラグイン「Auto Post Thumbnail」

WP-PageNavi

入れる頻度の高いもの

コメント・セキュリティもの

Contact Form 7
お問い合わせフォームプラグイン。

カスタムフィールド、カスタム投稿タイプもの

Custom Post Type Permalinks
カスタム投稿タイプのパーマリンクをカスタム設定

参考URL:カスタム投稿タイプのパーマリンクをカスタム設定できるWordPressプラグイン・Custom Post Type Permalinks

Custom Post Type UI
カスタム投稿タイプ、タクソノミーを簡単作成

Types – Complete Solution for Custom Fields and Types
機能は多いけれど、上記のCustom Post Type UIの方が好き

Post Thumbnail Editor

参考URL:Post Thumbnail Editor – サムネイル画像の表示範囲を手動で指定できるWordPressプラグイン

サイト外観・便利機能

Yet Another Related Posts Plugin
関連記事をピックアップ

WordPress Popular Posts
人気記事をピックアップ

WP Social Bookmarking Light
Socialボタンの設置

WPtouch Mobile Plugin
スマホ最適化

Regenerate Thumbnails

Force Regenerate Thumbnails
現在のテーマで定義されている画像サイズに基づいて、画像を再生成、
さらに不要になった画像サイズを削除

PHP Code Widge
ウィジット内にPHPが書ける

状況に応じて

カスタムフィールド、カスタム投稿タイプもの

Advanced Custom Fields
カスタムフィールドを作り誰でも簡単に情報の入力ができるように
投稿画面をカスタマイズ

参考URL:Advanced Custom Fieldsを使って、wordpressの記事入力項目を作り替える

Category Order and Taxonomy Terms Order
カテゴリーの順番を変更できるWordPressプラグイン

PTYPECONVERTER
記事の投稿タイプを一括変換
(2015/12/04現在うまく起動せず)

編集に便利なエディタもの

SyntaxHighlighter Evolved
ソースコードをキレイに表示

Table of Contents Plus
参考URL:Table of Contents Plus – 記事の目次を自動生成できるWordPressプラグイン

サイト外観・便利機能

Alpine PhotoTile for Instagram

Batch Cat

カテゴリの一括変更

P3 (Plugin Performance Profiler)

WordPressで負荷の要因となっているプラグインを計測できるP3(Plugin Performance Profiler)

WordTwit Twitter Plugin
投稿と同時にツイッターツイート設定可能

スライドショー

編集に便利なエディタもの

TinyMCE Advanced

TablePress

Password Protected

入れすぎだろうか?

どれくらいまでプラグインに頼っていいんだろう。
と思う今日このごろ。

人気の記事を自動集計してくれるプラグインWordPress Popular Posts

プラグインさえあればなんでもできる気がする

いままで、いろいろなサイトを見ては、どうやってこんな機能作るんだろ。
と思っていましたが、
WordPress始めて思ったこと。

誰かが作ってくれたプラグインでなんとかなる

ほんと、簡単にいろいろ作れるようになってるんですねぇ・・・

使い方

使い方は


を参考にしました。

日報___30女未経験からのWEBプログラミング
本当にいろいろ載ってますね。これ。
で、完成したのがこんな感じ。

このサイトは、とくにサムネイルがあるわけではないので、これでよいとして、
他のサイトで、サムネイルを表示したいものがあったので変更しました。

いつも、どこで何を変更するのか迷ってしまいますが、

「設定」→「WordPress Popular Posts」

  • 統計の期間を選択
  • 「投稿タイプ」を選択(投稿記事なら「post」、固定ページなら「page」)

私は、サムネイルを表示したかったので、どこでやるんだよーーーと探したら、

「外観」→「ウィジェット」

「表示する数」「時間間隔」「並べ替え順」「タイトル短縮」「抜粋」の設定はこちらですね。
表示したいサムネイルのサイズ入力もここです。
一生懸命スタイルシートいじってしまいましたよ。

2度とできるかっ!妊娠なんてこんなかんじで完成です!

ちなみに、
WordPress Popular Postsでサムネイル画像付き人気記事一覧の表示方法
を参考にしました!

いやはや、本当簡単ですねぇ〜。

WordPressで画像写真を好きなサイズに変更する方法とプラグイン紹介

WordPressの写真保存の仕組み

WordPressは、画像をアップロードすると自動的に3種類の大きさの画像が生成され、
記事の本文に挿入する時に大きさを選択する事ができます。

当初はこれすらも意味がわかりませんでした・・・
管理画面から、上記の3種類のサイズを調整することも可能ですが、
functionsに新たに違うサイズを生成する方法をご紹介します。
これを使えばいくらでも増やしていけます。

後ろの方にプラグインでなんとかする方法もあるので、
手っ取り早い方が好みの方はそちらへ。

functionsに自動生成する画像サイズのキーワードとサイズを追加

たとえば、横600、縦200のサムネイル画像を追加で作りたい場合。

functions.phpに

//自動作成する画像サイズ
add_image_size('size600_200',600,200,true);

と記載します。
()内のパラメータは
「’画像サイズを示すキーワード(好きなやつ)’,’横幅’,’高さ’,’画像の切り抜きを行うか否かを指定’」です。

詳しくはWordPressのCODEXで。
と言いつつも、最初の頃はこのCODEXがとっつきにくくて苦手でした笑

出力方法はthe_post_thumbnailで

画像の作成ができたので、今度は出力ですね。
出力したいテンプレートに

<?php the_post_thumbnail('size600_200'); ?>

でOKです。先ほどつけた名前を書いてあげて呼び出します。

今になって思うと、そんなに難しい事ではないんですよね。

いままでアップした画像の一括再生成

さて、新しく画像サイズを生成するので、今までアップロードした写真は
再度アップロードしなければいけなくなります。
が、量によっては大変。という時に、便利なプラグインがあります。
「Regenerate Thumbnails」です。使い方はググってください。

おおきな横長のサムネイルが欲しかった人向けの今までアップロードした分も新しいサイズでサムネイル作成してくれるプラグインAuto Post Thumbnail


記事の最初に細長の画像があるサイト多いですよね。
あんな目を引く画像をアイキャッチ画像といいますが、
これを勝手に生成してはたまた、記事のTOPに出力してくれるプラグインがあります。
勝手にはつくってくれませんでした・・・
twentytwelveを改造して作ったので、つい勝手にと・・・
1から作っている方は、functions.phpや表示したいテンプレートにコードを書く必要があります。(2014/09/11追加)

ちなみに投稿した画像の最初の写真を自動で持ってきます。

Auto Post Thumbnailというプラグインです。
こちらも使い方はぐぐってください。
参考サイトはこちら→新しい記事も過去の記事も全部自動でアイキャッチを作成してくれるAuto Post Thumbnail

過去の写真もちゃんと生成してくれますよ〜

勝手にサムネイル作ってくれるのはいいけど、切り取って欲しいところが違うわ!な時はPost Thumbnail Editor

なんでもプラグインで済ませられても、
こうしたい、ああしたいは尽きないんですよね。

私は、トリミングする場所をどうにか自分で調節できないかと思いぐぐってみました。
あるんですね笑

Post Thumbnail Editorというプラグイン
こちらも使い方はググってみてください。
参考サイト→サムネイル(アイキャッチ)画像のトリミング範囲を手動で決められるWordPressプラグインPost Thumbnail Editor

最後に

当初自分でサイトを作った時は、一番最初の方法で、functions.phpに追加して作成しましたが、
後に私のやりたかったことはAuto Post Thumbnailのプラグインで十分だったことに気づいてしまいました笑

いままで、みんななんでこう上手にサイトを作れるんだろう。と思っていましたが、
こういったプラグインをうまく使えば、それなりに出来上がるものなんだなぁ。
というのが、プログラマになって半年たち思うことでございます。

参考にした本・サイト

思ったより簡単!WordPressのサムネイルを別サイズも含め作り直す方法!!

LIG