WordpressをインストールしてSimplicityをカスタム

はじめてWordpressをインストールしてテーマをいじっているのですが。HTMLの知識はすこーしあるけどWordpressはちんぷんかんぷんだったのでぐぐりまくって今に至る。

仕事もせずコツコツとすすめておりました。働いてると本当に自由な時間ないな。昔ホームページ作ってた時もそうだけど、何より熱中できる。やっぱ、こういうのいじるの大好きだ

最初練習で1週間くらいレンタルのWordpressでStinger3を使ってみて、かなり使いやすかったけどあちこちで見かけるのでSimplicityにしました。その後ロリポのプランをコロリポ→ロリポに変更 Wordpressは簡単にインストールしてくれました

このSimplicityというテーマは何も考えなくてもすべて揃っているので私のようなWordpress初心者にはぴったり。でもやっぱチョットいじれるのがわかるといじりたくなっちゃってセンスもないのにあれこれやってしまってキリがないしセンスのなさに絶望するからいっそのこと有料テーマの導入を考えています。ほんとはシングルカラム化とかしたいんだけどとにかく時間がない

こまめに投稿するつもりが区切るところがわからず数か月書きためてしまった！長い！雑多！

JUGEMからの記事の引っ越し

ずっとブログ書いてたのはロリポブログという名前だけど中身はJUGEMなので引っ越し作業が必要。

ここをみながら JUGEMブログからWordPressへブログの引っ越し | memocarilog 画像を全部保存してこれで変換→JUGEMログをMTログに変換サイト

3つしかファイルないからさくさくっと置換（2011年からやってるのに記事少なすぎ）インポートは無事に終わり、もうWordpessで記事書いてたけどきれいに日付順に追加された。改行はBR消す設定にしたからか空白行が消えてて個別に修正。下書きになるよう変換したので直したものから公開。さすがにこの記事いらないだろっていうのは1個1個間引いていく。 BrokenLinkで何個か画像が表示されない通知が来た。

サイト（ブログ）のお引っ越し（移転）は301リダイレクトを。出来ない場合は、メタリフレッシュ（meta refresh）とrel=”canonical”を！ / もっと知りたいリンゴあれこれ

インデックス重複になるのかならないのか論争もあるようですがリダイレクトしておきました。遅い遅すぎた

プラグイン

入れすぎだろ

定番っぽいやつ

AddQuicktag
そんな凝った記事を書かないからアイコンフォントとかショートコードとか
Akismet
All In One SEO Pack
このテーマにはOGP?ツイッターカードが含まれてるからActiveにしてない
Auto Post Thumbnail
Comment Validation
Contact Form 7 -こっちに変えようかな→ MW WP Form - 柔軟なカスタマイズ性が魅力の WordPress 問い合わせフォームプラグイン。
TinyMCE Advanced
Wordpress Popular Posts
Save Editor Scroll Position
Admin Post Navigation
投稿画面で前後の記事に移動。いるようでいらないなこれ
Browser Shots
Broken Link Checker
TOC+
WordPressで見やすい目次を簡単に作る方法
どうでもいい記事につけたくない時はどうしたらいいんだろうね　一応４以上は目次って設定してるけど
PubSubHubbub
PHP Code Widget
Regenerate Thumbnails
Search Meter
今のところあまり役に立っておらず

高速化

プラグイン入れすぎなのかウェブフォントやらCSSのせいなのかクソ重くなった

完全保存版この組み合わせで完璧！wordpress高速化プラグインまとめ - aoringo works あんまりページのないWordpressでやっても意味はないみたいだしそもそもSimplicityは相性悪いらしい。ヘンなことしてふっ飛ばしたくない

コピペ一発でSimplicityを結構高速化する方法の通りにやってみたがわずかに改善したのみ

Head Cleanerちょっと苦労した

Head Cleaner の使い方と設定方法これのせいかfancyboxが動かなくなった。トップのサムネイル表示されないしPopular Postsは表示されてるけど・・・ Regenerate Thumbnails入れて作り直し→意味なし

Simplicityテーマをインストールして、サムネイルが正方形に表示されないときや、画像の比率が狂うときにやって欲しいこと

wp_print_head_scripts　とRakutenLink::add_head　のチェックを入れると消えた記事内画像は戻ったがリストは直らず。さらに フッタ領域の JavaScript も対象にする のチェックを外したら直った。 RakutenLink::add_headはチェック外して、wp_print～だけにしています。 SlickrFlickrはLoad JavaScript In Footerにチェックしてもなおらん。わからん。ヘルプページ見ようとサイト見ても見れないし

速度チェックとキャッシュ系プラグインも試してはみる

PageSpeed Insightsではスマホ表示遅いみたいです。57から71にはなりましたが。PCユーザーよりモバイルユーザーが多いのでまだまだ頑張らないと。が、上記の不具合でHead Cleanerを修正したら少し落ちてしまいました「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSS を排除する」ってなんだ。これも調べながらやろ・・・・

GTmetrixがCCからACになりました。YSlowがCなんですけど、アドイン使っても難しいので放置。

pingdomは72ぐらいから82になりました。これも上記と同じく後で下がったんですけど・・・体感はまだまだモッサリ。ロリポップ自体あんま速くないみたいだけど～

参考：たったの3分で33%も高速化！？Quick Cacheの導入と設定方法 | Yu Fukasawa Photography Quick Cache新旧版の選び方とその設定 / hirok-k.com

Total Cash?が相性が合わないのわかって結局QuickCache無料版インストール

Failed to update your /wp-config.php file automatically. Please add the following line to your /wp-config.php file (right after the opening <?php tag; on it's own line). ってエラー何～ああ、ようはdefine('WP_CACHE', TRUE);を書きたせってことか初心者すぎてここに書いてある<?phpもそのままコピペするとこだった。最後に書き足すのかわからずぐぐったら上の方でないといけないらしい。書き込み権限をチェックしてコピペ。びくびくしながら実行したけど大丈夫みたい。書き込み権限のチェックを外す。

で、結果なんだけど測定サイト3つの結果は変わらず体感はトップページだけやや速くなった？気がした個別ページはちょっと遅い。というか読み込まで数秒あって一気に表示されるんだけど。このプラグインいるかなあ？いらないよねなんか知識なしでやるのアブナイっぽいしということで元に戻した。

最終的に落ちついたのはこれ

共用サーバで手軽に導入できる、WordPressを高速化する方法 | OXY NOTES これもAPCとやらをOnにしてみたついでに001 Prime Strategy Translate Acceleratorもこれの効果はよくわかりません。 Optimize Database after Deleting Revisionsもこれみてインストール。何度も書き直すのでかなり便利。

こちらも参考：リビジョンとデータベースを最適化 Optimize Database after Deleting Revisions | いわしブログ

SNSボタンを減らして、cssファイルやjsファイルをプラグインで使わないように設定できるものは設定して減らす。だいたいシェアボタンなんているのかなあ誰もこんな記事シェアせんだろとも思うしいろんな記事シェアする人はアドインとかブックマークレット入れてるくない？私はそうなのですが・・・・ RSSはさすがにサイドバーに置きましたがシェアボタンはいらないような気も～もっと小さくてもいいし。プラグインで用意するとまた重たくなるよねえ。

画像系

EWWW Image Optimizer EWWW Image Optimizer の設定方法と使い方サイズより勝手にExif消してくれるのが助かる

Imsanity » アップロード時に画像を自動リサイズしてくれるWordPressプラグイン『Imsanity』

エラーが出てどうやってもアップできなかったけどロリポ側の設定変えたらできた

ロリポップのコンパネで php.ini 設定＞upload_max_filesize ＞20M

Imsanityの設定はPage/Postが680×0（もう少し大きくても？） Media Libraryが1024 elsewhereは0

メディアのほうが最近うまく稼働しなくてそのままのサイズになるので設定から読み込みして大きいものをまとめて縮小している

画像読み込み遅延プラグインBJ Lazy Loadでページ表示速度を改善！ | WordPressのアフィリエイトで稼ぐ人生を始める-サトシまあ効果はあるのか不明だが入れている

Flickrから画像を引っ張ってくるのに便利なプラグイン。便利すぎていつまで対応できるのか不安で不安で・・・・ Tatsuya Blog » [WordPress]wp-flickr-pressのバージョン1.6.2をリリース <http://fukata.org/2011/10/26/release-wp-flickr-press-1-6-2/>

flickrの表示はSlickrFlickrがスクエアで並べれていいなあと思ってたのにHeadCleanerで表示されなくなってあきらめ中。。

Easy FancyBox 画像を美しく拡大/WPプラグイン「Easy FancyBox」 | 楽々WordPressプラグイン <http://sharinglab.info/wordpress/wordpress-plug-in/design/easy-fancybox/>

バックアップ→BackWPup

エラーばかりでううまくいかなかった Dropboxに設定してみたがデータが大きすぎてタイムオーバー

ロリポップの設定画面でPHP5.2→5.4に ZipにせずGZipにしてバックアップも2種類にわけたらOK DropboxとSugarsyncに分けました。 ※Sugarsyncは完全有料化といいつつ日本ユーザーのみ5GBまで無料

BackWPup ver. 3も大丈夫。ロリポップでは、MySQLiはPHP 5.4で使えるのだった。 | WordPressとサーバでいきましょ

アクセス解析

NewStatPress 見た目はいいが検索ワードがうまく出ない日本語ファイルがリンク切れで手に入らない。

WassUp Real Time Analytics WassUpとSuperCacheは同時に使えない | You Look Too Cool アクセス解析「WassUp Real Time Analytics」を日本語化する方法 | あーりーの隠れ家

WordPress でアクセス解析を行うためのプラグイン | hirooka.pro たしかに両方使うとajax.phpに毎回アクセスがある。どっちかに絞らなくては。

WP SlimStat WP SlimStat - リアルタイムにアクセス解析ができるWordPressプラグイン - ネタワン全体的にはとてもよいし見た目も好きだしこれを使っている。検索ワードはウェブマスターツールで見る。ただ、Win7のFirefoxだと結果表示が崩れてしまってテキストのみになってしまうんだけどなんでだろ。

アフィリエイト関係

AmazonJS BabyLink ：ちっちゃなAmazonアソシエイトリンクの作成ツール

投稿画面から iOS / Mac アプリの紹介リンクを挿入するプラグイン App Store Insert を作りました（PHG 対応） · rakuishi.com

【WP Rakuten Link】Wordpress＋楽天アフィリエイトなら知らないと損するプラグイン | Wordpress奮闘記

よくわかってないけどこの3つはいれた。ほんとこういうの作ってくれる人って感謝の気持ちしかないよね

テーブル

定番のTablePress TablePressのテーブル幅を変更する＆表の背景色や文字色を変更する方法 | WordPressのアフィリエイトで稼ぐ人生を始める-サトシ WordPress › フォーラム » TablePressのcssのサイズ変更などについて

Markdownで記事書いてて、TablesGeneratorという神サイト発見したのでこのプラグイン要らないかな～って思います Markdown Tables generator - TablesGenerator.com

一回入れたけど今は使ってない

WP Maintenance Mode WP Total Hacks WordPress Importer ←記事引越し時のみ

プラグインの停止っていうのをそもそも何か理解してないけどな！

今後テーマを変えた時必要になりそうなプラグイン

SNS系プラグイン QuickAdsenseとかアドセンスプラグインページナビゲーション系プラグインぱんくず系プラグイントップに戻る系プラグイン

wpプラグイン「topへ戻る」ボタンを比べてみました。 | scrapbook
Wordpressで使える、jQueryで「トップへ戻る」ボタンの作り方
WordPressのプラグインなしで「トップへ戻る」ボタンを設置 | WordPress学習Note

テーマ変えなくてもセキュリティとか Wordpressのセキュリティを向上させるプラグイン「Acunetix WP Security」

テーマの改造

子テーマ適用

ふつうの小テーマ（child）で左サイドバーに。右サイドバーのテーマが多いけど、左が好き。 cssとheader-insertを主に編集

テーマの設定やWordpressの設定で行うこと

色変更メニュー表示とか色設定とかフォローボタンいらないから非表示にファビコンの設定 No image画像の差し替え（Popular postと記事用）

サイドバーウィジェット

RSSとFeedlyをサイドバーに（トップ右上だけが選べないから） feedlyは公式の生成ツールで作った。別に一個くらいウェブフォントじゃなくてよかろう。 feedly. your news. delivered.

あとはアドセンスぺたぺた

サイドバーの人気記事

トップは人気記事、記事のページはそのカテゴリの人気記事を表示したかったけどうまくいかないのであきらめた。以下参考サイト

コピペでOK！WordPress Popular Postsで新着と重複なしのカテゴリ別サムネイル付の人気記事表示 - ゆめぴょんの知恵こちらのものは設置はいいが、トップで表示される記事は全然人気じゃないっていう

WordPress Popular Postsで今見てる記事と同じカテゴリの人気記事を表示させる方法 | love guava! これは表示は正しいがトップでは表示されない人気記事とカテゴリ別人気記事が続いて表示されるので実装はまだまだ先か

シェアボタンをモバイルに

PC版のSNSボタンが気に入らないのでモバイルに置き換え。親テーマのsingle.phpのsns-buttonsの部分をsns-buttons-iconに

Markdown記法を使う

Jetpackとやらはなんとなく使いたくなかった。 JP Markdownというプラグインは入れた。 WordPress › JP Markdown « WordPress Plugins JetPackのモジュール？これでMarkdownで投稿できてます。

ずっと覚えられなかったけどやっと覚えたぞ！

記法はこちらを参考にしている文章作成やメモ書きにも便利、Markdown記法｜Web Design KOJIKA17

基本的にWordpressの投稿画面では入力せず、Simplenoteのウェブ版で下書き（設定からMarkdownにチェックするとPreviewできる） MacからはMouが人気らしいが、私はNottinghamを使用。ウェブプレビューを行うとプレビューを見ながら書ける FirefoxのアドオンはMake LinkかFire LinkでMarkdownのリンクを生成する。

Wordpressでリンクを貼るとtarget="blank"が使えないので markdown記法でリンクをtarget="blank"にする - エンジニアをリングするこちらのコードをheader-insert.phpに貼付け。

CSS編集

見出しスタイル変更

↓超参考にしました。見出しのデザインを css の疑似要素と Web アイコンフォントで装飾して見出しを見出しらしく。

Awesomeでなくfeatherアイコンで指定 contentはフォントファイルについてたリファレンスはわからなかったのでcss見たけど下三桁の数字でよかった。 h1〜だけだとサイドバーの見出しにもついてしまうのでarticle h3〜みたいに指定

h2だけ編集して色も変えた。小テーマのほうに .article h2 から指定

参考：[CSS]見出し要素をシンプルなHTMLで美しくスタイルするテクニックのまとめ | コリス

ウェブフォントを使う

英字とアイコンの二種類。まるごとサーバーにアップして、フォントについてたcssファイルを置いて子テーマのヘッダで読み込ませた。

アイコンフォントの置き換えは親テーマをいじる。 breadcrumbs.php datetime.php edit-link.php entry-body.php とかとか・・・キリがないんだけどね

置き換えが完全でないから元のアイコンフォント消せないから要領悪い。でもFont Awesomeはみんな使ってておもしろくない・・・

参考ソーシャルアイコンを画像ではなくWebフォントで表示する際の備忘録 | なまら春友流

意外と簡単！アイコン風Webフォント使ってみたらブログデザインがグッと洗練されたよ！設定方法を紹介 | love guava!

webフォントの使い方 | アズのWordPressカスタマイズと最新型SEO

Google Fonts で複数のフォントやウェイトを使用するときの正しい記述方法 - Webrawl

Webフォントを指定するには？ - @font-faceの解説 - CSS3リファレンス

HTML5&CSS3入門第4回 @font-face（ウェブフォント）の利用 | デベロッパーセンター

ウェブフォントを作る

タイトルロゴくらい作ってみようかと実に何年ぶりかにフォントづくりに取り掛かった。Macで初めて作った。

Glyphs mini（￥4,500）とやらを買った私レベルならminiでよかろう

Glyphs Mini カテゴリ: グラフィック&デザイン現在の価格: ¥4,500

パスをどうするかなのだけどわたくしIllustrator持ってないどころか使えないもので Sketch3（使用版）でなんとか・・・→Bohemian Coding - Sketch 3

Sketch 3 カテゴリ: グラフィック&デザイン現在の価格: ¥9,800

これ機会があれば買ってもいいかも。

パスよくわからんけどどっちもなんとなくで操作

手で紙に書く
スキャンする
Cocoapotraceでパスにする

DragPotrace動かせんかった

Sketch3で修正する
Glyphsにコピペ

日本語はOtherに必要分だけ手打ち

パスがめちゃくちゃになってる部分を手作業で直す
プレビューでタイトルを打ち出してみて修正
書き出し（出力）
変換（下記参照）

まる二日かけて行いました。なんでこんな気の狂いそうなことを好んでするのが自分でも疑問

参考：

変換作業

日本語フォントとして出力できてないからか、Webfont Generatorで変換うまくできず。

そこで株式会社武蔵システムさんのサブセットフォントメーカーで取り出しというかはじめからロゴのぶんしかないから、実質変換作業。そのままWOFFコンバーターで変換。EOTファイル作成とHTMLファイル作成にこれですべてうまくいきました。Macでも使えて無料とか・・・・！ TTEditでお世話になっているところだけど、これでできたときは本当に神としか思えなかった

できたotfをttfに→フォントファイルのフォーマットを変換する： ttf otf fon pfb dfont afm

さらにSVGに変換 Convert ttf to svg | Everything Fonts

あとはウェブフォントでやったようにcss設定するだけタイトルはテーマの設定で入力して小テーマのcssの#site-title aでfont-family指定こんなことしなくても画像でやれば一瞬で済みますね。自己満足ですね。はい。

君が宇宙