wordpress

elementorでサイト構築を爆速にする(その1:テンプレートを使う)

CSSやコードの知識がなくても、Wordpressのページを
プロが作ったようにデザインできる夢のようなプラグインがElementorです

Elementorのダウンロードはこちらから

どれだけすごいのかっていうのはこちらのムービーを見て頂ければと。

インストール→有効化
専用の設定画面あり。あるけどそのまま使える。
Elementorを入れたら、Elementor Addonsも入れておくと幸せになれると思う。
Elementor Addonのダウンロードはこちら

前提

・投稿ページにも、固定ページにも使えます
・ホームページビルダーのもっとすごい版
・グリッドスタイルとかほんのりかじってると理解度早い
・ぺライチなんて目じゃないぜ!

使い方

固定ページを新規でも元からあるページでもよいので、このボタンをクリックする

すると、こんな画面が出てきます。

・新しいセクション
新しいボックスが出てきます。
HTMLに若干慣れている人、ビルダーで構築できる人はこちら

・テンプレートを追加
elementorで用意されているテンプレートデザインを使って構築します。

 

テンプレートを使ってみる

テンプレートは無料のものと有料のものがあります。プロ版にすれば使えるようになりますが、無料版でも十分使えるのもが揃っているので、テンプレートを見ながら作り方を学ぶのが良いと思います。

テンプレートを選択すると、ライブラリ一覧が出ます。
この中から好みのデザインを選択し、適用します。

すると、こうなります。
使用しているデザインテーマによりますが、コンテンツ部分に適用されます。
デザインテーマを変えたくない場合はここからいじることになりますが、サイドバーがいらないっていう方は、編集バーの「三」をクリック。

Page Settingsをクリック

ここからテンプレートを、Elementor Canvasに変更すると全画面に適用されます。
ページごとにこの設定を適用できるので色々試してみると良いと思います。

 

説明したい事が1ページで収まりそうもないので
続きはまた次回。

Social Bookmarksプラグインはとっつきにくいけどできる子!

SNSリンクを容易につけてくれるプラグインはたくさんありますが、
その中でもカスタマイズ性が非常に高かったプラグインがSocial Bookmarksでした。

Social Bookmarksのダウンロードはこちらから(英語版のみ)

まず何ができるかっていうと、
コレだけのSNS共有&ブックマークを備えてます。

100zakladok, 7live7, a1webmarks, addthis, addtoany, adfty, adifni, allvoices, amazon_ca, amazon_de, amazon_fr, amazon_jp, amazon_uk, amazon_us, aollifestream, armenix, arto, azadegu, baang, baidu, balatarin, barrapunto, bebo, bibsonomy, biggerpockets, bitacoras, bland, blinklist, blip, blogger, bloggy, blogkeen, bloglines, blogmarks, blogpoint, blogtercimlap, blurpalicious, bobrdobr, bolt, bonzobox, bookmark_it, socialbookmarkingnet, bookmarks_fr, bookmarky_cz, boxdotnet, bryderi, businessweek, buzzurl, care2, choix, citeulike, comments, connotea, corank, cosmiq, current, dailyme, dealsplus, delicious, designbump, diaspora, digg, diggita, diggitsport, dihitt, diigo, dipdive, domelhor, dotnetkicks, douban, draugiem, dzone, edelight, efactor, ekudos, elefantapl, evernote, ezyspot, facebook, informazione, fark, faves, favoriten_de, fc2bookmark, flaker, folkd, formspring, thefreedictionary, fresqui, friendfeed, friendster, funp, gamekicker, ghidoo, givealink, globalgrind, govn, godudu, googlebookmarks, googlebuzz, reader, googleplus, grono, gwar, habergentr, hackernews, hadashhot, haohao, hatena, healthimize, hedgehogs, hellotxt, hotklix, hyves, icio, identica, igoogle, iwiw, jamespot, jappy, jolly, jumptags, kaboodle, kaixin, ketnooi, kledy, laaikit, ladenzeile, latafaneracat, linkninja, linkagogo, linkarena, linkedin, linkter, linkuj, livedoor, livejournal, mawindo, meinvz, mekusharim, memori, mendeley, meneame, messenger, misterwong, misterwong_de, mixx, moemesto, moikrug, mototagz, msdn, msnreporter, multiply, muti, mymailru, myaol, myhayastan, mylinkvault, myshare, myspace, n4g, netlog, netvibes, netvouz, newsing, newsmeback, newstrust, newsvine, niftyclip, ning, naszaklasa, nowpublic, nujij, odnoklassniki, oknotizie, oneview, orkut, pfbuzz, pingfm, pinterest, plaxo, plurk, pochvalcz, posterous, pratiba, preferate, proddit, pusha, quantcast, readitlater, readwriteweb, reddit, rediff, redkum, researchgate, scoopat, scoopit, scoopeo, sekoman, select2gether, shaveh, shetoldme, sinaweibo, skyrock, slashdot, smiru, socl, socialdust, sodahead, sonico, soupio, sphinn, sportpost, springpad, spurl, squidoo, startlap, strands, studivz, stumbleupon, stylehive, supr, svejo, swik, taaza, tagmarksde, tagvn, tagza, techmeme, technet, technorati, thinkfinity, thisnext, tuenti, tulinq, tumblr, tweetmeme, twitter, typepad, upnews, urlaubswerkde, viadeo, virb, visitezmonsite, vk, vkrugudruzei, vodpod, vybralisme, webmoneyru, webnews, webnews_de, wikio, wikio_fr, wikio_it, winlivespaces, windycitizen, wink, wists, wordpress, wykop, xanga, xing, yahoobookmarks, yahoobookmarks_jp, yahoobuzz, yahoomessenger, yandex, yardbarker, yemle, yigg, yuuby, zakladoknet, ziczac, zilei, zingme and zootool.

ひえー。
国産じゃないのにはてなも使える!
これだけあれば最強でしょう。

でも設定の仕方がこれまためんどくさい。
プラグインを有効にしたからといって使えません。
ついでに専用の設定画面もありません。

・ショートコード
・PHPをテンプレートに埋め込み
・Function.php

のいづれかを使用しているデザインテーマのloop内に入れてやれば動作します。
ということは、loop内であればいいので、ご使用されているデザインテーマにもよりますが、
single.php
page.php
または、これらに内包されてるconent.phpなんかに設置してやればよいかと思います。

ちなみにTAPIRのサイトでは
single.phpに、こんな感じで入れてます。

<?php echo social_bookmarks( 'padding-left: 5px; padding-right: 5px; Delicious=off&Digg=off&LinkedIn=off&reddit=off&StumbleUpon=off' ); ?>

そうすると、こうなりました。

分解すると、
・defaultは以下の通り
Delicious, Digg, Facebook, Google+, LinkedIn, Pinterest, reddit, StumbleUpon, Twitter, Email and Print Friendly (Print)

・defaultをonにすると、上記のものが表示されます。
・defaultもなにも入れないと、どざーっと全部のSNSリンクが表示されます。

・defaultが有名どころを網羅出来てると思うので、それを使って、
delicious, Digg, LinkedIn, reddit, StumbleUponをオフにしました。
オフにするには、

Delicious=off

のようにオフにしてあげればよいです。

オリジナルのアイコンを使いたい時
オリジナルのアイコンを使うには、アイコンフォルダを指定してやり、アイコンのファイル名と合わせてやる必要があります。

アイコンがある場所はここ
http://ご自分のドメイン名/wp-content/plugins/simple-social-bookmarks/images

アイコンを指定するには
‘iconfolder=24×24’
を追加する。
iconfolderに相対パスの画像の保存先URLを指定する。
 
 

wordpressのon Print Friendlyを使う

このプラグインの利点として、on Print Friendlyが使えることが非常に大きいです。

コレをクリックすると

こうなります。

PDFにすることもできるし、メール添付することもできるし、印刷もできます。
ちょっと設定がめんどくさいかもしれないですが、今のところこれが一番最強かなーという感じです。

Contact Form 7でアップロードしたファイルをWP上で管理する

Contact Form 7で作ったメールフォームから
ファイルをアップロードした場合、メール添付をさせるのが基本的な使い方かと思います。
https://contactform7.com/ja/file-uploading-and-attachment/
本家にそう書いてあるのでたぶんそう

メール添付が正常に送られると、サーバ上にアップされたデータは消えます。

フォーム送信

メール添付

正常に送られたらファイル削除

となる流れです。

そうすると、うっかりIMAP受信をしていてうっかりメールを削除した場合リカバリできません。
なので、WP側に蓄積されるといいなというのが前提。
WP側で管理してくれるプラグインが、
Advanced Contact form 7 DB(英語版のみ)
になります。


使い方は、インストールしたら、Advanced CF7 DBの画面から、読み込ませたいフォームを選ぶだけ。
過去のフォームには対応してないので過去のものは取り出せません。

authorページでカスタムフィールドの値があるとき表示

たぶんニッチすぎて使いどころないかもしれないけど。
私用にメモ。

user_dataで定義したauthorに次ぎの値があるとき表示させるっていうif文
ユーザ情報にfacebook_urlのカスタムフィールドを作った。
その値があれば、echo内を表示。
bootstrap使っているので、
spanのclassにアイコンをつけてある。

    $user_data = get_userdata($author);
    if ($user_data->facebook_url) {
        echo '<a href="'.$user_data->facebook_url.'"><span class="fa fa-facebook-square"> </span></a>';
    }

ユーザの情報をどこから引っ張ってくるのかで数時間くらいわちゃわちゃしました。
もう少しスマートな方法あるんだろうか。

画像をアップしても表示されなくなったら

今まで通り普通に画像アップしただけなのにいきなり表示されなくなったなど
割とあるあるなようなのでまとめてみた。

wp-configをいじる

・wp-config.php

define('UPLOADS', 'wp-content/uploads');

を追加する。

以前あった
設定→メディア→ファイルアップロード
を復活させて、アップロード先を指定する。
完全なURLパスも設定する。
 
 

キャッシュ系アプリを止める

キャッシュ系アプリを止める前にキャッシュのクリアを行って様子を見てみる。
キャッシュ系アプリを止めたらwp-config.phpに書いてあるキャッシュプラグインの記述も消す。
FTPクライアントで、
/wp-content/uploads
に入ってるchashフォルダも消す。
 
 

uploadフォルダを消す※バックアップ取ってね

ここまできて直らなかったら、アパッチの権限のせいなので
uploadフォルダをまるっと消して、新しくuploadフォルダを作成。
パーミッションの設定を757あたりにする。
バックアップ取っておいた画像データをほいっと放り込む。

これでだめならもうだめだな。

event managerでイベント一覧をカスタマイズしたい

したいよね。

まずやり方。
1.event manager → 設定 → ページ設定 → イベント一覧/アーカイブで、イベント一覧ページのページ指定を【イベントページを指定しない】に変更する。
2.新しい固定ページなどを作る。
3.ショートコードをコピペして入れる。
4.publish。
これでイベント一覧ページのカスタマイズの土台ができた。

ショートコードはこれ。

[events_list category_id="X"]

カテゴリーを指定したい時は、category_id=”X”のX部分をカテゴリーのID番号に書き換えてください。

このサイトにたどり着いた方はおそらくショートコード入れても表示されないよ!?っていう方だと思います。
上記の方法でも多分モヤッとしているのではないかと思いますので解説。

【ここから前提】
event managerをインストールした際にevent manager側で必要なページを自動的に生成してくれています。
なので、そのページのページスラッグを書き換えたところでevent manager側のページ生成IDは変わらないので、event managerの保有しているページということになります。
【/前提おわり】

本家のサイトの方にショートコードの例などがありますので、それらを参考にざくざくとカスタマイズしてみてください。
本家のショートコードの例はこちら

カスタマイズの呼び出しは、管理画面側の
event manager → 書式設定
に準じています。
この場所にプレースホルダーをほいほい放り込み、HTMLを追加削除することで変更されます。
・イベント一覧
・イベント詳細ページ
・イベントの抜粋
(その他表示に関わるもの全て)

ショートコードはwordpressの仕様に準じているので、慣れている方はテンプレートにPHPでカスタマイズしていったほうが早いかもしれません。