レスポンシブサイトの印刷でスマホ用のレイアウトになるときの対処法

レスポンシブサイトの印刷を実際に行うときに、スマホ用のレイアウトで表示されてしますことがあります。
今回はそれに対する対処法です。

基本画面幅によってレイアウトを変更する場合上記のように記述しますが、
この書き方だと印刷する際スマホ表示になってしまいます。

なので、メディアクエリの設定を変更します。

pc表示の時にとプリントする際にはprint, screen andをメディアクエリに記述することで解決できます。

wpのevents-managerプラグインで予約数に応じて表示を変更する

wpのevents-managerプラグインで予約数に応じて、受付終了、残りわずか、受付中と文言を切り替える方法です。

プラグイン > プラグインの編集 > events-managerから
em-event.phpを選択

上記のようにcase~と書かれている場所付近に
下記を追加します。

記述ができたらEvents Manager のオプションの書式設定>イベントの
イベント一覧の書式のhtmlの書かれている場所に#_RESERVEを追記してあげることで、予約数に応じた文言を表示することができます。

WordPressのrssにアイキャッチ画像の情報を出力させる

WordPressで新着記事をサムネイル付きで表示させる方法です。
通常では抜粋や本文などにある記事内の画像の情報しか引っ張ってくることしかできませんが、
function.phpに設定を記述することで、記事に設定したサムネイル情報を引き出すことが可能になります。

■抜粋

■本文

functions.phpに以下を追記します。

記述が完了すると、pタグで囲まれた画像のurlが、RSSの内に画像情報として記載されます。

任意の数ごとに要素で囲い込む方法

要素の中にある、複数ある子要素に対して、n個ずつ特定の要素で囲い込む方法です。
例えば、div要素にずらっと並んだimg要素をクラスimg-boxという要素を作成して三個ずつ、
まとめるとすると下記のようになります。

この変更をjqeryで行う方法は、#boxという要素に対して、子要素のimgを指定して.wrapAllを使用してdivタグで内包します。
whileでの記述ではlengthでループする度にimgの存在をカウントして、0になるまでループさせる記述です。

複数のカスタム投稿に共通のカスタムタクソミーを設定する

「共通カテゴリー(com_category)」を作成し、複数のカスタム投稿タイプを一つのカスタムタクソノミーでまとめる方法です。

一つのタクソノミー統一する利点として、複数あるカスタム投稿タイプ記事を一つのシングルページで管理したり、
個別にカスタム投稿タイプで分けて記事を表示できたり、柔軟に記事を分類し表示できる点です。

例えば、新着一覧では、それぞれのカスタム投稿の、全ての記事を表示し、
そこから個別に投稿を表示できたりできます。

com_categoryには[news]と[work]といった、共通タクソノミーに属させたい、別々のカスタム投稿を配列として代入しています。

Textareaの文字制限の設定

テキストエリアに最大文字数の設定をしたい場合、
maxlength属性を使用します。
文字数制限を設定しただけだと、ユーザーにテキストエリアにどれだけの文字を打ち込むことができるのか
わかってもらうことができないので、jqueryを使用して300文字以上記述するとアラートが出るように設定してみます。

■HTML

■jquery

WP 複数の投稿タイプの新着一覧の作成

トップページに、複数あるカスタム投稿記事一覧の新着情報をのせる方法です。

通常のループで投稿を指定せず、query_postsを使って複数の投稿タイプを指定してループを回します。
get_postsは,条件を指定して,その条件を満たす投稿を取得するための関数です。

any(全て),post (投稿ページ),page(固定ページ),post-type-slug(カスタム投稿)
必要に応じて、記述する投稿タイプを記述していきます。

‘custom01’,’custom02’の部分には、表示させたいカスタム投稿名を指定します。

MW WP formで自動返信メールを分ける方法

複数あるフォームを一つにまとめて、フォーム1ページとして、
お問い合わせフォームを作成するということはよくあります。

条件分岐でフォームを個別に表示させることができたとしても、
お問い合わせした相手に、複数フォームの項目の内容が飛んでしまっては意味がありません。

そこで送信するメールもフォームの内容に合わせて、分岐させる方法を紹介します。

フィルターフック
mwform_auto_mail_mw-wp-form-xxxを使用します。

上記ではフォーム内にあるラジオボタンの選んだ選択肢でメールの内容を分岐させています。

xxxの部分はフックを適用したいフォームの作成画面に表示されているフォーム識別子を入力します。

WordPressサイトの中で静的htmlを共存させる

WordPressサイト内で別途、違うデザインのページを置くときや、ランディングページの作成、
会員用のページを作成したい時など、静的ページとして構築したい場合があります。

ですが、wordPress では固定ページに登録したスラッグの階層で、
静的HTMLを置いてしまうと、そのページが閲覧できなくなってしまいます。

WordPressをインストールしたフォルダの中にあるindex.phpをコピーして
下記の記述に変更します。

↓↓

WordPressをインストールしているディレクトリのindex.phpを
静的htmlファイルのあるフォルダ内にコピーして、
header.phpへのパスをディレクトリからのパスに変更してあげることで、共存させることが可能です。

カスタム投稿記事でコメント欄を追加

カスタム投稿記事でコメント欄を追加する方法です。

1,WordPressの設定で、
「設定」>「ディスカッション」で「新しい投稿へのコメントを許可する 」にチェック、

2,function.phpにカスタム投稿にコメントの許可
‘supports’ => array( ‘title’, ‘editor’, ‘thumbnail’, ‘excerpt’, ‘custom-fields’,’comments’ ),

3,コメント用のテンプレ作成

4,single-カスタム投稿名.phpに
インクルードタグを表示させたい場所に追加

5,最後に東湖の新規作成画面で、表示オプションのデスカッションにチェックを入れて完了です。