PHP 初心者が WordPress の プラグイン 作成 ！ part67 ( ココナラブログで区切り線・リンク・出版サービスの要素 )

この記事では PHP 初心者 が WordPress プラグイン を 作成 します。 part67 では引き続きココナラブログで使用できる要素を調査します。

前回に引き続きココナラブログで使用できる要素を探りたいと思います。

PHP 初心者が WordPress の プラグイン 作成 ！ part66 ( ココナラブログで画像と動画の要素 )

区切り線

区切り線は文章の区切りで使用するようです。
以下のアイコンをクリックすると区切り線が表現できます。

クリックすると以下のように区切り線が表示されます。

要素は以下のような構成でした。

<div data-v-22617325="" class="c-blogBody_hr" contenteditable="false"><hr></div>

基本的にclass属性のあるdivで括るスタイルのようですね。

リンク

リンクを貼り付けることができます。ただしココナラのドメインのみ許可されています。
以下のアイコンをクリックします。

クリックすると以下のようなウィンドウが表示されます。
試しに適当なココナラブログの記事をリンクしてみました。

なんだかリッチな感じで表示されましたね！

要素はこんな感じで構成されています。

<div class="c-blogBody_widget" data-div="" contenteditable="false" blog-id="98201" user-id="2360918" title="ココナラヘルパの動作確認(エスケープ編)">
      <div class="c-blogWidgetItem" contenteditable="false">
        <div class="c-blogWidgetItem_inner">
          <div class="c-leftColumn">
            <div class="c-heading">
              <h3 class="c-heading_title">
                ココナラヘルパの動作確認(エスケープ編)
              </h3>
            </div>
            <div class="c-leftColumn_summary">
        <!-- wp:paragraph --><p>実装が正しく処理されるか確認を行います。<br>GoogleのURLです。</p><!-- /wp:paragraph --><!-- wp:paragraph --><p><a href="ttps://www.google.co.jp">ttps://www.google.co.jp</a></p><!-- /wp:paragraph --><!-- wp:paragraph --><p>どうでしょうか？</p><!-- /wp:paragraph -->
      </div>
            <div class="c-leftColumn_favoriteWrap">
              
            </div>
          </div>
          
        </div>
        <div class="c-blogWidgetItem_footer">
          <div class="c-postInfo">
            <img class="c-userIcon" src="https://dplhqivlpbfks.cloudfront.net/resize/coconala_profile/40x40/a81afe9336b35bec7a45665093d8b2033d4a65ee7b005780036f0cbeffed1b7c/original/15847564/850dc506090d6bd9519a0434cb238fe23884c0c6cf486099b181c97f4992a9a8.png" alt="xxライカxx" loading="lazy" style="width: 32px; height: 32px;">
            <div class="c-postInfo_rightColumn">
              xxライカxx
              <div class="c-postInfo_openedAt">
                2021/07/12
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

なにやら恐ろしいコードですね(笑

WordPressから転記するときにはこのリンク機能は使用できないので問題ありません😉

出品サービス

こちらも使用する機会はありませんが念のため。

以下のアイコンをクリックすると出品サービスのリンクを張ることができます。

クリックすると以下のようなウィンドウが表示されます。
登録している出品サービスを選択する方式なんですね。

私は1つしか出品していないので1つ選択は容易でした！

出品しておいてよかった😁

以下のようにドーンと表示されます。

要素は以下のようになっています。

<div class="c-blogBody_service" data-div="" contenteditable="false" data-id="1630411" title="Excelマクロ作成・修正します">
      <div class="c-serviceWidgetItem c-serviceWidgetItemBlock" contenteditable="false">
        <div class="c-serviceWidgetItem_inner c-serviceWidgetItemRow c-serviceWidgetItemBlock_inner">
          
          <div class="c-serviceWidgetItemRow_image">
            <img src="https://dplhqivlpbfks.cloudfront.net/resize/coconala_crop/230x190/service_images/original/3b056bcb-2678573.png" alt="" class="c-serviceWidgetItemImage" loading="lazy">

            <div class="c-serviceWidgetItemRow_labels">
              
            </div>
          </div>

          <div class="c-serviceWidgetItemRow_flag">
            
          </div>

          <div class="c-serviceWidgetItemRow_content c-serviceWidgetItemContent">
            <div class="c-serviceWidgetItemContent_header c-serviceWidgetItemContentHeader">
              <div class="c-serviceWidgetItemContent_title">
                
        <p class="c-serviceWidgetItemContent_overview">
          Excelマクロ作成・修正します
        </p>
        <h3 class="c-serviceWidgetItemContent_catchphrase">
          undefined
        </h3>
      
              </div>
            </div>

            <div class="c-serviceWidgetItemContent_footer c-serviceWidgetItemContentFooter">
              <div class="c-serviceWidgetItemContent_infoUser c-serviceWidgetItemContentInfoUser">
                <div class="c-serviceWidgetItemContentInfoUser_icon">
                  <img class="c-userIcon" src="https://dplhqivlpbfks.cloudfront.net/resize/coconala_profile/40x40/a81afe9336b35bec7a45665093d8b2033d4a65ee7b005780036f0cbeffed1b7c/original/15847564/850dc506090d6bd9519a0434cb238fe23884c0c6cf486099b181c97f4992a9a8.png" alt="user" loading="lazy" style="width: 20px; height: 20px;">
                </div>
                <div class="c-serviceWidgetItemContentInfoUser_name">
                  <div>xxライカxx</div>
                </div>
                <div class="c-serviceWidgetItemContentInfoUser_level">
                  
                </div>
              </div>

              <div class="c-serviceWidgetItemContent_price c-serviceWidgetItemContentPrice">
                <div class="c-serviceWidgetItemContentPrice_rating">
                  
        <div>
          <i class="c-serviceWidgetItemContentPriceRating_star coconala-icon -star"></i> -
        </div>
      
                  
                </div>

                <div class="c-serviceWidgetItemContentPrice_price">
                  <div>
                    <strong>2,000</strong>円
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

こちらもとんでもないコードになっていますが今回は対象外なので問題ありません！

 

まとめ

ココナラブログで使用できるタグを確認しました。
対象としているタグの構成はそんなに難しくなさそうですね。

文字の装飾や見出し関係のタグもありますのでそれは次回に。

今日はここまで！

Docker,PHP,WordpressPHP,WordPress,プラグイン

Posted by raika@blog