コーダーのKです。

今回は忘備録としてショートコードの自作について残します。

先に断っておきますが、探せば出てくるようなことばかりです。参考にさせて頂いた皆様に感謝を。

 

では、まずショートコードを利用できるようにfunctions.phpに下記を記述します。
ショートコード追加は下記の"add_shortcode"を利用します。

add_shortcode('my_text', 'my_text_add');
function my_text_add() {
echo 'sample text';
}

あとは任意の位置に<?php echo do_shortcode('[my_text]'); ?>と記述してやれば、my_text_addが動く仕組みですね。

試しにheader.phpやsidebar.phpに記述してみましたが、問題なしです。

 

投稿に利用する場合はコンテンツエディターに直接[my_text]と書けばいいとのこと。
他のプラグインなどでもそうしていますしね(※1)

 

※1 投稿へのショートコード追加

 

が、これ罠です。

記事を確認すると下図(※2)になってしまう。

 

※2 実行結果1

 

this is test for "short code".より上に「sample text」が出てきていますね。

うーん……原因を探してGoogle先生に聞いてもよくわからなかった。

だったら他のソースを参考にすればいいかな? という事でショートコードで記事一覧を出す、などなど色々調べた結果、、、

みんなreturnしてる。よくわからんがとりあえずreturnしてみる。

add_shortcode('my_text', 'my_text_add');
function my_text_add() {
return 'sample text';
}

こんなんでええんかな・・・

 

※3 実行結果2

 

・・・おお、ちゃんと任意の位置に「sample text」が出た。

 

■原因

wp_content()で出力される際の読み込みのタイミングとのこと、、、echoだとどうも先に処理されるようです。

header.phpなどはwp_content()を通らないから関係がないって話だそうです。

 

なのでreturnにしておくと、ショートコードのある位置に文字列が返される結果になる。

 

あと、ショートコードの優先順位は’11’よってautopなどのフィルターより優先度が低いので、自動でpタグに囲われたりする。

どこかにショートコードがpタグで囲われないようにするfunction書かないとダメかな?

 

■所感

こんな初歩的なこともわからないなんちゃってコーダーなのですが、色々探せば救いの手はあちらこちらにあります。

そうやって技術の共有をしてくれる善意に縋る・・・だけだと勿体ないですし、誰かの一助になれれば幸いです。

久しぶりの更新となります。コーダーKです。

 

さて、すっかり”冬”です。いかがお過ごしでしょうか。

何か書けってことだったので、Wordpressが5.0にメジャーアップデートされたことですし、基本を書こうかと。

 

さて、表題の「Wordpressの投稿にアイキャッチがない!」です。

 

投稿するぜー -> あれアイキャッチがない -> 誰だよ表示オプション触ったの! -> Oh...絶望

 

テーマによるんですが、独自的なアイキャッチ設定方法のあるテーマなどだと、アイキャッチが有効化されてない場合があるんですよね・・・

 

と言うわけで、出てないなら出したらいいじゃん! である。

方法は非常に簡単。

 

functions.phpへ下記を記述するだけ

 

add_theme_support('post-thumbnails');

 

add_theme_support関数は他にも色々機能はありますが、今回はサムネイルだけなのでこれで十分です。

これで投稿の編集画面に行けば右サイド下部に”アイキャッチ”の設定が出ているはず。

 

やれやれです。が、上記が設定されていないってことは、基本的にテーマにアイキャッチを表示する記述がないってことだよね。

 

なので次は表示したい箇所にサムネイルが出るように記述します。

loop内なら下記で取得可能です。

 

the_post_thumnail('thumbnail');

 

これでアイキャッチ画像がimgタグに囲まれてできます。

 

<img width="150" height="90" src="******/test-150x90.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="">

 

画像のURLだけが欲しい場合などはまた別の記述方法になるのですが、アイキャッチだけ欲しいならこれで十分です。

 

コード見にくいな・・・次回なんか考えよう

ウェブリーがありますここ大阪はおとつい?から梅雨入りしましたね!
昨日はカラカラ晴れてていいお天気だったのに、今日は雨・・そして寒い・・
レインシューズが欲しくて欲しくてたまらないデザイナーCです。

こんなに雨強かったっけー?というくらいに降っていてまたこの季節がやってきたなぁと思う今日この頃です。
そんな私は6月生まれの雨女です。もうすぐ2○さい!((´д`)) ぶるぶる・・・
気を引き締めてがんばります!

さてさて、そんなウェブリーですが、
この6月からまた新しく人が入ったり、社員の方がご結婚を気に在宅になったりとバタバタしております。
結婚しても働きやすい会社☆を目指して、柔軟な対応のできる会社へと着々と変貌を遂げております!
社員も女性が多いので、これからもっと結婚していく方も増えると思うんですよね。在宅でできるようになったらいいですよね!
バイトの方も、フルタイムでなくても自分の働きやすい時間に働くことができたりと、何かと融通のきくようになっております!

そんな、ウェブリー絶賛バイト募集中です!!
フォトショップ、イラストレーター触れる人大歓迎!実務経験問いません!
気になる方はぜひ、一度お問い合わせください☆

☆ウェブリー☆
http://www.wevery-hp.com/

こんにちは!ウェブリーのデザイナーです。

今日は「パソコンがフリーズする前に読みたい記事」を書きます!

といってもここで長々と説明するより、すでにわかりやすく詳細な記事がネットにいくつかありますので、そちらをご案内します。

■Norton - パソコンがフリーズ時の緊急対応と二度と繰り返さない方法
https://japan.norton.com/pc-freeze-3052

■日本HP - Microsoft Windows 7 - コンピューターの応答が停止 (フリーズ) する場合の対処方法
http://support.hp.com/jp-ja/document/c02070260

■121ware - Windows 8 / 8.1でパソコンがフリーズする場合の対処方法
https://121ware.com/qasearch/1007/app/servlet/relatedqa?QID=014891

使わないファイルは、予め外付けHDDかクラウドに保存するなどして
パソコンに残しておかないように心がけたいですね。

残して置かなければならないファイルも圧縮するなどして
通常のファイルより軽くしておいたらいいかもしれません。
その場合は以下の「7-Zip」というフリーソフトがおすすめです。

■7-Zip
http://sevenzip.osdn.jp/

こちらは通常のZIP形式より30~70%も高圧縮できるソフトです。
※拡張子は[.7z]になりますので、他のパソコンで解凍する時は対応するソフトが必要です。
また、「7-Zip」はZIP圧縮も対応しており、ほかのZIP圧縮ソフトより2~10%良い結果になるそうなので、この機会にぜひご利用されてみてはいかがでしょうか。

みなさまも良いパソコンライフを!


***


ホームページ・スマートフォン・アプリ制作ならウェブリーにお任せください!

http://www.wevery-hp.com/

 


連休も終わってはやくも一週間が過ぎました。
連休は萩でのんびりしてたコーダーKです。

萩、いいですね。
歴史散歩には丁度いいんですが、大河ドラマのおかげで人人人!
大河ドラマ館も覗きましたが展示がドラマ焦点なので、歴史などに興味のある人は萩博物館に行くことをお勧めします。
幸いなことに旅行中は天候に恵まれて、最終日はこんな空でした。

暈

さて、本題ですが……
最近何かとSPサイトなどで特殊記号を使う機会がありました。
が、これがなかなか上手くいかない。
HTMLなら問題ないんですが、疑似要素となると途端に効かないことが多々
今更過ぎてコーダーとしてどうなんだ? と言ったところですが;

まず基本的に疑似要素では&や#、;は当然文字列になるので使えません。
なので&はバックスラッシュ(\)、#は0に置き換え、;は削除します。

それでも意図した文字にならない場合があります。
その場合は数値を16進数に変更してください。
それで大概は上手くいきます。

例として💛なんかがわかりやすいかもしれませんね。
数値参照は&#9829;です。ルールに乗っ取って\09829にします。
これで出力されない場合は9829を16進数で指定してあげてください。
この場合は9829なので2665ですね。
これで💛が挿入されたはずです。

そのほか★マークや核のマークなども利用できるようです。色々あるので調べてみるのも面白いかと思います。