カテゴリー
未分類

contact-form-7の横幅「size="40"」を変更する

contact-form-7 のデフォルトのお問合せフォームを貼り付けていました。

テーマtwentytenを2カラムにしたら、そのフォームの横幅がはみ出てしまったので、
小さくします。

プラグイン>プラグイン>contact-form-7>設定 で設定画面を開きます。
そこで、以下のような箇所があるので、最後の35×30″”を追加。

[email* your-email 30×30″”]

最初の35がsize(サイズ)、次の30がmaxlength(最大の文字数)です。

Contact Form 7 – 問い合わせフォームの設置を参考にさせていただきました。

カテゴリー
WPカスタマイズ備忘録

テーマ「twentyten」カスタマイズ サイドバーとフッターの入れ子を解消

吐き出されたページのソースを見ていると、サイドバーとフッターが激しく入れ子になっている。


<li id="recent-posts-4" class="widget-container widget_recent_entries">
<h3 class="widget-title">タイトル名</h3>
<ul>
<li>文字</li>
</ul>
</li>

なぜこうなっているか、理由が私にはよくわからないので、
とりあえず、外側をdivでくくることにした。

書き直すのは「functions.php」
373行目のfunction twentyten_widgets_init以下のArea 2~6。


		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</li>',

これがウィジットの大外のくくりの部分なので、これを以下のようにdiv組に直す。


		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</div>',

それと、sidebar.php と sidebar-footer.php から <ul class=”xoxo”>と相方の</ul>を削除する。
sidebar.phpでは 2カ所に各一対、sidebar-footer.phpには 4カ所に各1対ずつある。

デフォルトのままだとcssはそのままでも不具合はないみたい。

カテゴリー
WPカスタマイズ備忘録

Twenty Elevenを2カラムにする

Add Sidebar Support in Posts for the Twenty Eleven Themeを参考に、wordpressのテーマ「Twenty Eleven」を2カラムに変更しました。

といっても、まだ上記サイトを深く読んでおらず、やったことは以下の2つだけ。

  • 「single.php」「page.php」のテーマ編集。<?php get_footer(); ?>の直前に<?php get_sidebar(); ?>を追加する。
  • 上記サイトの一番最後に掲載されているCSSをコピーして、別フォルダ「twentyeleven_sidebar」内に、style.cssというファイル名で保存(子テーマを作成した)。テーマ選択で「twentyeleven_sidebar」を選択。

とりあえず、これで作業はひとまず完了。あとは不都合がでたら対応します。

カテゴリー
WPカスタマイズ備忘録

別のサイトの新着一覧を件数指定で表示する

見る人への配慮を欠いたこのサイト。
そのうち見やすくなるかもー、です。

今回は別のwordpressサイトの新着一覧を件数指定で表示することにしました。
まだ実装していませんが、メモです。
※現在配布されているテーマでは、ウィジットでフィードを件数指定で表示できます。


<?php
include_once(ABSPATH . WPINC . '/rss.php');
$rss = fetch_rss('★★自分のフィードのurlに/rssをつけて記載★★');
$maxitems = 3; //新着3件を取得
$items = array_slice($rss->items, 0, $maxitems);
?>
<ul>
<?php if (empty($items)) echo '<li>更新情報が取得できませんでした</li>';
else
foreach ( $items as $item ) : ?>
<li><a href="<?php echo $item['link']; ?>" title="<?php echo $item['title']; ?>"><?php echo $item['title']; ?></a></li>
<?php endforeach; ?>
</ul>

参考にさせていただいたのは、
別のWordPressブログのフィード取得して表示、の失敗メモ

カテゴリー
css

CSS3で画像を使わずbody背景にグラデーション

むかーしの、画像を使ってサイトを作る方法しか知らなかったので、
CSSだけで美しい描写ができることに、ほんと驚く。そして嬉しい。

参考にさせていただいたのは
CSS3「gradient(グラデーション)」のIE対応方法

カテゴリー
未分類

フロントページを自作のテンプレにする場合

MTからWordpressの転身者が陥りやすいこと(と言い訳してみる)。

トップページを、記事羅列ではなく、自分で設定した項目(カテゴリーごとの記事一覧など)にする場合、テーマindex.phpを編集するのではなく、以下の方法で。

1.ページ>新規追加 で、トップページのメイン部分のみ、内容を入れます。

2.管理画面>設定>表示設定>で、
「フロントページの表示」を固定ページにし、1.のページを指定します。

以上です。

///

h2タグのデザインをクラス名つけて、個別ページと違うのを使っていたので、
そこだけまだ対応できていません。どうやって実現しようか検討中です。

カテゴリー
未分類

ツイッターボタンを記事の最後に挿入

記事を読んで、なるほどーと思ったら誰かに言いたい!!
その気持ちを形にするためにリツイートボタンを設置します。

single.phpを編集します。

記事の最後に設置する場合は


<div class="entry-content">
<?php the_content(); ?>

このすぐ後にリツイートボタンのソースを挿入します。

リツイートボタンでは、その記事のタイトルとurlが自動で入るように、
「ツイート内テキスト」を<?php the_title(); ?>に、
「URL」を<?php the_permalink(); ?>としました。

ソースは以下のようになります。


<div class="twitteretc"><a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>

class指定は好きな言葉に。不要な場合は削除してください。

▼参考にさせていただきました。
WordPress/Movable Typeに公式ツイートボタンを設置する

カテゴリー
WPカスタマイズ備忘録

アフィリエイトリンクは条件分岐で表示分け

楽天アフィリエイトリンクを挿入することにした。
テンプレートに直接貼り付ける。

トップページには表示したくないので、条件分岐。


<?php if ( is_single() ) { //単独記事ページの場合 ?>
<h3 class="widget-title">楽天市場</h3>
★ここにアフィリエイトリンクを入れた

<?php } elseif (is_page()) { //ページの場合 ?>
<h3 class="widget-title">楽天市場</h3>
★

<?php } elseif (is_category()) {// カテゴリーの場合 ?>
<h3 class="widget-title">楽天市場</h3>

★

<?php } else {// 単独記事ページ以外の場合 ?>
★

<? } ?>

できたら、個別記事とページとカテゴリーページは一括指定したいけど、
どうやっていいかわからないので、とりあえずこれで。

カテゴリー
未分類

カスタムフィールドを共通テンプレートに書き込む

カスタムフィールドの値を、footer.phpなどの共通テンプレートに書き込む場合。
書くテンプレートごとにふりわけしながら値を表示する方法。


<?php if ( is_single() ) { //単独記事ページの場合 ?>
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<?php echo get_post_meta($post->ID,'★カスタムフィールドの名前を入れる★',true); ?>
<?php endwhile; endif; ?>

<?php } elseif (is_page()) { //ページの場合 ?>
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<?php echo get_post_meta($page->ID,'★カスタムフィールドの名前を入れる★',true); ?>
<?php endwhile; endif; ?>

<?php } elseif (is_home()) {// 単独記事ページ以外の場合 ?>

★ここにコードなどを入れる

<?php } else {// 単独記事ページ以外の場合 ?>

★ここにコードなどを入れる

<? } ?>
カテゴリー
未分類

WPTouchのメモ

wp-content>plugins>wptouch>themes>default
にあるindex.phpに、以下の変更を加えました。


 <?php _e("at", "wptouch"); ??>
<?php echo get_the_time('G:i') ??>

という部分を


<?php echo get_the_time('Y/m/d(D) ') ??>

single.phpは


<?php echo get_the_time('M jS, Y @ h:i a')??>

というところを、


<?php echo get_the_time('Y/m/d(D) ')??>

としました。

///
また画像表示については
wp-content>plugins>wptouch>themes>default
にあるfounctio.phpテンプレートに、以下の変更を加えました。


function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('//i', $post->post_content, $matches);
    $first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image
        $first_img = "画像をアップした場所の絶対パス(http://から始まるアドレス";
    }
    return $first_img;
}

そしてindex.phpテンプレートに、以下を加えました。


<a href="<?php the_permalink(); ?>" >
<img class="alignleft" src="<?php echo catch_that_image(); ?>" alt="" width="75" height="75" />


参考にさせていただいたのは
私がWPtouchのトップページ画面をカスタマイズするために行った5つのこと