Memo

2018.01.18

contact form 7で、選択したら他の選択肢が出てくる分岐を作った

Conditional Fields for Contact Form 7ならできるよ！
ダウンロードはこちらから

Contact Form 7と
Conditional Fields for Contact Form 7のどちらも必要なので
インストールします。

やりたいこと

・プルダウンなフォームから何かを選択すると更に選択肢が出る
・あらかじめフォームはすっきりさせておきたい
・ラジオボタンで何かをクリックしたら入力フォームを出したい

こんな感じでしょうかね。
何かを選択したらそれに付随する選択肢が出るというところでは共通ですね。

早速作ってみます。

Contact form 7 でフォームを作ってみる

ドロップダウンメニューでプルダウン式の選択肢を作ります。

名前はmenu1。オプションはaaa、bbb、cccが選択できるようにしました。

aaaが選択された時にテキスト入力フォームを出したいので、表示させるテキストフォーム作ります。
textフォームの名前はtext1にしました。

ここから肝要。グループを作るよ

Conditional Fields Groupのボタンをクリック

group-1というグループを作りました。
これは、aaaが選択された時に表示させるグループということになります。
このショートコードを、表示させたいフォームに対して囲みます。

ここまででいったん保存してください。絶対だよ！
※保存しないと条件式が作れないです。

ルール（条件）を作るよ

Conditional fieldsのタブをクリック

add new conditional ruleをクリックすると新しい条件を作ることができます。

menu1でaaaが選択された時にgroup-1を表示させたいので、
if（もし） menu1（menu1のなかで） equals（変更なし） aaaが選択されたら　group-1 をshow
というif文ができます。

ということで、無事に表示されました。条件分岐のさらに分岐も可能です。すごいなー！

必要ないかもしれないけど、デモページ置いておきますね・・・・
demo

2018.01.11

wordpressでループの中にループを入れたら詰んだ

Elementorで作ったページはウィジェット配置とかめんどくさい事しない限りPHPをじかに書くことはできないので、functionにショートコードを作って、外からPHPファイルを読み込むことにした。

やりたかったこと

トップページによくある、新着情報一覧（複数カテゴリ）を、カテゴリーも表示させたものを表示させたい。

2018年1月11日カテゴリ名
記事タイトル

こんなかんじの。

結論から言うと、成功した。successである。

結論から知りたい人はこちら

・function.phpにショートコードと呼び出すファイルを指定
・読み込むphpを作成
・ショートコードをループ内に配置

・function.php

// phpファイルをショートコードにして埋め込む
function short_php($params = array()) {
  extract(shortcode_atts(array(
    'file' => 'default'
  ), $params));
  ob_start();
  include(STYLESHEETPATH . "/news.php"); // STYLESHEETPATHはテーマのstyle.cssのある階層
  return ob_get_clean();
}
add_shortcode('topics', 'short_php'); // topicsはお好きな名前に。

・外部php

<?php query_posts("post_type=post&posts_per_page=5&cat=1,5"); ?>

<?php if(have_posts()): ?>
<div class="news tab-content">
<?php while(have_posts()):  the_post();
$cat = get_the_category();
$cat = $cat[0];
$cat_name = $cat->cat_name;
$cat_slug = $cat -> slug;
?>
<dl class="">
<dt><span class="date"><?php the_time('Y年m月d日'); ?></span><span class="<?php echo $cat_slug; ?>"><?php echo $cat_name; ?></span></dt>
<dd><span class="ttl"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span></dd>
</dl>
<?php endwhile; ?>
</div>
<?php else: ?>
<?php endif; ?>
<?php wp_reset_query(); ?>

・埋め込んだショートコード（さっき作ったtopicsは任意の名前に）

[topics]

これで表示できるようになった。

何で詰んだのか

何に詰んだのかというと、ループが１つだけの場合、別にreset_queryはいらないんですが、入れ子（ネスト）した場合は、きちんとwp_reset_queryを入れてやらないと、ループの外に中でループした内容がさらに出てきちゃうという。
うまくいかなくて２時間くらいは悩んだと思う。
これを読んだ人が悩みませんように・・なむなむ。

あと、例に示したPHPは色々間違ってるかもしれないので、ちゃんとしたPHPを書いている人を参考にしたほうが良いです。

2018.01.09

elementorでサイト構築を爆速にする（その１：テンプレートを使う）

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

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

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

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

前提

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

使い方

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

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

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

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

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

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

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

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

Page Settingsをクリック

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

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

2018.01.07

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に相対パスの画像の保存先ＵＲＬを指定する。

wordpressのon Print Friendlyを使う

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

コレをクリックすると

こうなります。

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

2018.01.05

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の画面から、読み込ませたいフォームを選ぶだけ。
過去のフォームには対応してないので過去のものは取り出せません。

2017.04.18

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>';
    }

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

1 234 5