Webデザイン独学#12

今日やったこと

●ブログセクション部分をショートコードで呼び出せるようにする

$content = do_shortcode( shortcode_unautop( $content ) ); 
//こちらをショートコード内に記載する

参考サイトはこちら

●ショートコード内でPHPコードを含む場合は、どうすれば良いか
▶︎PHPとHTMLの部分を明確に分けると分かりやすい。

function blog_slide($attr){
   extract(shortcode_atts(array(
               'id' => 'please input id'
       ), $attr));
   $url = get_permalink($id);
   $title = get_the_title($id);
   $thumbnail = get_the_post_thumbnail_url($id);
   $output .= <<<EOF
           <a href="{$url}">
             <div class="slide" style="background-image: url({$thumbnail}); ?>);">
               <p class="sample">$title</p>
             </div>
           </a>
EOF;
   return $output;
}
add_shortcode('bslide','blog_slide');
//WordPressの関数を使いつつ取得したパーマリンク等は一旦変数へ入れて使用する

●ショートコード内で改行がある場合も問題がないように修正する
▶︎こちらのサイトを参照して解消した

/* --------------------------------
* ショートコード改行整形  
* -------------------------------- */

function shortcode_p_fix($content) {
   $array = array (
       '<p>[' => '[',
       ']</p>' => ']',
       ']<br />' => ']'
   );
   $content = strtr($content, $array);
   return $content;
}
add_filter('the_content', 'shortcode_p_fix');

●ソーシャルアイコンの表示および、ユーザー情報の紐付け
▶︎以前苦戦したところだが、今回はこちらのサイトを参考にすればできた。
ファイルを分けずにfunctions.phpに書き込んだらOKだった。

●h1とintroの部分の位置を調整して整列させる
▶︎午前中に完了/max-widthを指定することで調整した

ーーー昼休憩ーーー

●ブログセクションのスライダーの大きさや見栄えを調整する
▶︎午後から対処する/swiperを利用する/こちらのサイトを参照した。
ある程度、形にすることができたので、こちらをテーマに組み込んでいく作業を明日やろうと思う。


明日やること

WBS
●Swiperコード(CSS/js)をテーマに導入
●Sliderボックスをショートコード化
●TOPページへ実装
●Aboutセクションのワイヤーフレーム作成

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

1

Webデザイン勉強ログ

23歳から独学でWebデザインに関するあれこれを、独学で勉強していく過程を記録していきます。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。