Category Archives

73 Articles

キャプションを付けた画像の可変が利かない[WordPress]

by admin 0 Comments

WordPressで、画像を投稿する場合、キャプションを簡単に付けられる便利機能があります。ただ、キャプションを付けると画像が自動的に<div>~</div>で囲まれ、インラインで幅が指定されてしまうというクセがある為、レスポンシブデザインで制作する場合、不便です。

スタイルシートで、無理やりに設定していましたが、functions.phpに、1行追加するだけで、勝手に幅が指定されなくなります。

add_filter( 'img_caption_shortcode_width', function(){ return 0; } );

これは、大変便利!
ありがたく使わせて頂くことにします。
参考サイトはこちらです。

今頃、レスポンシブデザインに(汗)



今頃なんですが、FlavorDesignのサイトをレスポンシブ化しました。

http://flavor-design.biz

自分のサイトって、真っ先にやれよという感じなんですが、
結局後回しにして、ここまで…汗

…といっても、作り直す余裕はなくて、既存のサイトに、モバイル用のCSSを追加しただけです。
手抜きすぎますが、タブレット用は、PC用と同じものを見せることにしました。

style.cssをコピーして、mobile.cssを作り、
検索置換で、横幅を100%にしたり、フロートを解除したりしてから、表示を調整。

当時、グローバルナビを背景画像でだしてあったので、そこが面倒でしたが、
カスタムメニューを使って、テキストに変更。
jQueryプラグイン「MeanMenu」を使って、スマホ用折りたたみメニューを。

下記メモです。

[html]
<?php if (is_mymobile()):?>
<!– ↓スマートフォン用のviewport –>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!– ↑スマートフォン用のviewport –>
<?php else: ?>
<!– ↓スマートフォン以外のviewport –>
<meta content="width=1024" name="viewport">
<!– ↑スマートフォン以外のviewport –>
<?php endif; ?>
[/html]

[html]
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( ‘stylesheet_url’ ); ?>" />
<link media="only screen and (min-width: 0px) and (max-width: 480px)" href="<?php bloginfo( ‘stylesheet_directory’ ); ?>/mobile.css" type="text/css" rel="stylesheet"/>
[/html]


Welcart「カートに入れる」文言の変更【WordPress】

by Hiromi 0 Comments



Welcartメモ。

「カートに入れる」を「買い物かごに入れる」という文言に変更したいというご要望。
テーマの wc_item_singl.php の中。

[html]
<?php usces_the_itemSkuButton(__(‘Add to Shopping Cart’, ‘usces’), 0); ?>
[/html]

(‘Add to Shopping Cart’, ‘usces’) を ‘買い物かごに入れる’ に変更する。

1箇所ではない。カスタマイズによる。


ブログカテゴリの時だけ、サイドバーにブログのカテゴリメニューを[WordPress]

by Hiromi 0 Comments



自分用メモ。

ブログカテゴリの時だけ、サイドバーにブログ下のカテゴリメニューを出す。
件数表示付きの場合です。
(階層2階層の場合が、depth=2)
[html]
<ul>
<?php $cats = get_category_by_slug(‘blog’); ?>
<?php wp_list_categories(‘show_count=1&depth=2&orderby=slug&use_desc_for_title=0&hide_empty=1&child_of=’.$cats->term_id.’&title_li=’); ?>
</ul>
[/html]

メディアライブラリの画像編集で画像が表示されない場合の対処法[WordPress]



3年くらいサイト放置されてた会社さんの御依頼で、
WordPressをバージョンアップした際の不具合。
いろいろ検索して、対応策を発見。

原因は、テーマのfunction.phpの中に、
1つでも下記のような書き方があると、
メディアライブラリの画像が表示されなくなるということ。

[html]<?php //処理 ?>

<?php //処理 ?>[/html]

上記を下記に変更で、解決です。

[html]<?php //処理 ?>
<?php //処理 ?>[/html]


WordBench福井勉強会(土曜日)



9月5日の土曜日は、WordPressの勉強会で、支援センターに。
これといった勉強会風景の写真は撮ってなかった。
富山から来られた方に頂いたお土産【かんこんたん】

かんこんたん

かんこんたん


ふだん、ひとりで作業してることが私にとって、とても有意義な勉強会でした。
皆様、ありがとうございました!


スマホで閲覧時【のみ】タップで電話をかける設定



ヘッダーによくある電話番号画像で、
スマホで見た時だけ、電話番号をタップしたら電話がかかるようにする。
パソコンなどのときは、リンクエラーになるので、リンクさせたくない。

実装はjquery にて。

[html]<img src="img/tel.png" alt="0120000000" class="tel">[/html]

内に

[html]
<script src="/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
var device = navigator.userAgent;
if((device.indexOf(‘iPhone’) > 0 && device.indexOf(‘iPad’) == -1) || device.indexOf(‘iPod’) > 0 || device.indexOf(‘Android’) > 0){
$(".tel").wrap(‘<a href="tel:0120000000"></a>’);
}
});
</script>
[/html]