Membina plugin perkongsian sosial anda sendiri untuk WordPress

Plugin perkongsian sosial membolehkan pelawat laman web anda untuk berkongsi kandungan laman web anda dengan mudah di laman media sosial. Ini membantu meningkatkan kesedaran keseluruhan laman web anda.

Sudah ada berpuluh -puluh plugin perkongsian sosial sedia ada yang hanya boleh anda pasang dan dilakukan dengannya, tetapi di mana keseronokan itu?

Dalam tutorial ini, saya akan menunjukkan kepada anda bagaimana untuk membina plugin perkongsian sosial anda sendiri untuk WordPress dari awal, yang boleh menambah butang perkongsian sosial di bawah setiap jawatan. Pengguna boleh berkongsi siaran hanya dengan mengklik butang laman media sosial yang dikehendaki.

Takeaways Key

Plugin Perkongsian Sosial membenarkan pelawat laman web untuk berkongsi kandungan dengan mudah di laman media sosial, meningkatkan kesedaran laman web anda.
Membina plugin perkongsian sosial anda sendiri untuk WordPress melibatkan membuat direktori dan fail, membuat item menu admin, membuat halaman pilihan, memaparkan butang perkongsian sosial, dan menggayakan butang media sosial.
Halaman Pilihan membolehkan pengguna memilih laman media sosial yang mereka mahukan butang, dan butang itu sendiri ditambahkan pada akhir jawatan menggunakan penapis 'the_content' di WordPress.
Menyesuaikan plugin perkongsian sosial boleh melibatkan mengubah gaya CSS, menambah lebih banyak platform media sosial, menjadikan butang responsif, mengesan prestasi dengan alat analisis, menambah bilangan saham menggunakan API, dan mengoptimumkan butang untuk SEO.
Mengapa anda memerlukan butang saham media sosial?

Ia sering melaporkan bahawa lebih daripada 80% pengguna mempertimbangkan membaca kandungan berdasarkan cadangan rakan mereka. Dengan perkongsian sosial, anda memberi pengguna keupayaan untuk berkongsi kandungan anda dengan rangkaian rakan mereka sendiri.

Lebih daripada 40 bilion saham diklik setiap hari di web, oleh itu menambahkan butang perkongsian sosial di laman web WordPress anda adalah langkah pertama untuk membantu memasarkan laman web anda.

Direktori dan Fail Plugin

untuk memulakan perkara, buat direktori yang dipanggil Social-Share dan buat fail berikut di dalamnya:

dalam fail sosial-share.php tambahkan teks berikut untuk membuat plugin boleh dipasang.

--social-share
	-social-share.php
	-style.css

Membuat item menu admin

<span><span><?php </span></span><span>
</span><span><span>/*
</span></span><span><span>Plugin Name: Social Share
</span></span><span><span>Plugin URI: https://www.sitepoint.com
</span></span><span><span>Description: Displays Social Share icons below every post
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Narayan Prusty
</span></span><span><span>*/</span></span></span>

kita perlu membuat halaman pilihan untuk plugin kami di mana pengguna boleh memilih butang yang mana laman media sosial harus dipaparkan. Untuk membuat halaman pilihan terlebih dahulu kita perlu membuat item menu yang mana halaman pilihan akan dilampirkan.

Berikut adalah kod untuk membuat item menu admin di bawah tetapan item menu peringkat atas.

di sini kami menambah item menu menggunakan add_submenu_page yang memang dipanggil di dalam tindakan admin_menu. sosial_share_page adalah fungsi panggil balik yang perlu memaparkan kandungan halaman pilihan.

<span>function social_share_menu_item()
</span><span>{
</span>  <span>add_submenu_page("options-general.php", "Social Share", "Social Share", "manage_options", "social-share", "social_share_page"); 
</span><span>}
</span>
<span>add_action("admin_menu", "social_share_menu_item");</span>

inilah item menu kami seperti:

Membuat halaman pilihan

mari kita kodkan fungsi sosial_share_page untuk memaparkan kandungan halaman pilihan.

--social-share
	-social-share.php
	-style.css

di sini kami menambah seksyen bernama Social_SHARE_CONFIG_SECTION, dan mendaftarkan tetapan sebagai saham sosial.

sekarang mari memaparkan bahagian dan medan pilihannya.

<span><span><?php </span></span><span>
</span><span><span>/*
</span></span><span><span>Plugin Name: Social Share
</span></span><span><span>Plugin URI: https://www.sitepoint.com
</span></span><span><span>Description: Displays Social Share icons below every post
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Narayan Prusty
</span></span><span><span>*/</span></span></span>

di sini kami membiarkan pengguna memilih dari butang perkongsian Facebook, Twitter, LinkedIn dan Reddit. Kami menyediakan antara muka kotak semak untuk membolehkan pentadbir memilih butang mana yang hendak dipaparkan. Anda boleh mengembangkan senarai untuk menyokong lebih banyak laman media sosial yang diperlukan.

inilah halaman pilihan akhir kami seperti:

memaparkan butang perkongsian sosial

Untuk memaparkan butang perkongsian sosial di bawah setiap jawatan, kita perlu menapis kandungan setiap jawatan sebelum ia dihantar. Kita perlu menggunakan penapis the_content untuk menambah butang perkongsian sosial ke hujung jawatan.

di sini adalah kod bagaimana untuk menapis kandungan pos dan memaparkan butang media sosial.

<span>function social_share_menu_item()
</span><span>{
</span>  <span>add_submenu_page("options-general.php", "Social Share", "Social Share", "manage_options", "social-share", "social_share_page"); 
</span><span>}
</span>
<span>add_action("admin_menu", "social_share_menu_item");</span>

inilah cara kod ini berfungsi:

• pertama kita menambah pembalut untuk pautan perkongsian media sosial kita.
• Kemudian, kami mengambil semula URL lengkap jawatan semasa yang akan dikongsi di laman media sosial. Kami juga melarikan diri dari URL menggunakan fungsi ESC_URL yang disediakan oleh WordPress.
• maka kami menyemak butang mana pengguna ingin memaparkan dan menambah markup butang masing -masing ke kandungan pos.
• Akhirnya, kami menambah URL pos semasa hingga akhir pautan perkongsian sosial dari laman media sosial masing -masing.

Berikut adalah bagaimana butang media sosial kami kelihatan di bahagian depan di bawah setiap jawatan:

menggayakan butang media sosial

mari melampirkan gaya.css di bahagian depan di dalam mana kita akan meletakkan kod untuk menggayakan butang. Inilah kod yang memaparkan fail style.css.

function social_share_page()
{
   ?>
      <span><span><span><div> class<span>="wrap"</span>>
         <span><span><span><h1 id="gt">></h1></span>Social Sharing Options<span><span></span>></span>
</span> 
         <span><span><span><form> method<span>="post"</span> action<span>="options.php"</span>></form></span>
</span>            <span><span><?php </span></span><span>               <span>settings_fields("social_share_config_section");
</span></span><span> 
</span><span>               <span>do_settings_sections("social-share");
</span></span><span>                
</span><span>               <span>submit_button(); 
</span></span><span>            <span>?></span>
</span>         <span><span><span></span>></span>
</span>      <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span>   <span><span><?php </span></span><span><span>}</span></span></span>

inilah kod CSS untuk menggayakan butang:

function social_share_settings()
{
    add_settings_section("social_share_config_section", "", null, "social-share");
 
    add_settings_field("social-share-facebook", "Do you want to display Facebook share button?", "social_share_facebook_checkbox", "social-share", "social_share_config_section");
    add_settings_field("social-share-twitter", "Do you want to display Twitter share button?", "social_share_twitter_checkbox", "social-share", "social_share_config_section");
    add_settings_field("social-share-linkedin", "Do you want to display LinkedIn share button?", "social_share_linkedin_checkbox", "social-share", "social_share_config_section");
    add_settings_field("social-share-reddit", "Do you want to display Reddit share button?", "social_share_reddit_checkbox", "social-share", "social_share_config_section");
 
    register_setting("social_share_config_section", "social-share-facebook");
    register_setting("social_share_config_section", "social-share-twitter");
    register_setting("social_share_config_section", "social-share-linkedin");
    register_setting("social_share_config_section", "social-share-reddit");
}
 
function social_share_facebook_checkbox()
{  
   ?>
        <span><span><span><input> type<span>="checkbox"</span> name<span>="social-share-facebook"</span> value<span>="1"</span> <span><span><?php checked(1, get_option('social-share-facebook'), true); ?></span></span> /></span> Check for Yes
</span>   <span><span><?php </span></span><span><span>}
</span></span><span>
</span><span><span>function social_share_twitter_checkbox()
</span></span><span><span>{  
</span></span><span>   <span>?></span>
</span>        <span><span><span><input> type<span>="checkbox"</span> name<span>="social-share-twitter"</span> value<span>="1"</span> <span><span><?php checked(1, get_option('social-share-twitter'), true); ?></span></span> /></span> Check for Yes
</span>   <span><span><?php </span></span><span><span>}
</span></span><span>
</span><span><span>function social_share_linkedin_checkbox()
</span></span><span><span>{  
</span></span><span>   <span>?></span>
</span>        <span><span><span><input> type<span>="checkbox"</span> name<span>="social-share-linkedin"</span> value<span>="1"</span> <span><span><?php checked(1, get_option('social-share-linkedin'), true); ?></span></span> /></span> Check for Yes
</span>   <span><span><?php </span></span><span><span>}
</span></span><span>
</span><span><span>function social_share_reddit_checkbox()
</span></span><span><span>{  
</span></span><span>   <span>?></span>
</span>        <span><span><span><input> type<span>="checkbox"</span> name<span>="social-share-reddit"</span> value<span>="1"</span> <span><span><?php checked(1, get_option('social-share-reddit'), true); ?></span></span> /></span> Check for Yes
</span>   <span><span><?php </span></span><span><span>}
</span></span><span> 
</span><span><span>add_action("admin_init", "social_share_settings");</span></span></span></span></span></span></span></span></span></span>

Kesimpulan

Dalam artikel ini saya telah menunjukkan kepada anda bagaimana dengan mudah membina plugin perkongsian media sosial anda sendiri. Anda kini boleh meneruskan dan mengembangkannya untuk menambah butang untuk lebih banyak laman media sosial dan juga memaparkan bilangan saham bersama -sama dengan butang. Sila kongsi pengalaman anda dengan plugin anda sendiri di bawah.

soalan yang sering ditanya mengenai membina plugin perkongsian sosial anda sendiri untuk WordPress

Bagaimana saya boleh menyesuaikan plugin perkongsian sosial saya untuk WordPress?

Menyesuaikan plugin perkongsian sosial anda untuk WordPress boleh dilakukan dengan mengubahsuai gaya CSS. Anda boleh mengubah rupa butang anda, saiz, warna, dan juga kesan hover mereka. Anda juga boleh menentukan di mana anda mahu butang anda muncul di laman web anda, sama ada di bahagian atas, bawah, atau sisi jawatan anda. Ingatlah untuk sentiasa menguji perubahan anda untuk memastikan mereka berfungsi seperti yang diharapkan dan tidak mengganggu fungsi laman web anda. Boleh menambah lebih banyak platform media sosial ke plugin anda. Ini boleh dilakukan dengan menambahkan lebih banyak elemen butang dalam kod PHP anda dan menghubungkannya dengan URL perkongsian media sosial masing -masing. Pastikan untuk menggunakan struktur URL yang betul untuk setiap platform untuk memastikan fungsi perkongsian berfungsi dengan betul.

Bagaimana saya boleh membuat butang perkongsian sosial saya responsif? Pertanyaan Media. Ini membolehkan anda menetapkan gaya yang berbeza untuk saiz skrin yang berbeza, memastikan butang anda kelihatan baik pada semua peranti. Anda boleh menentukan saiz, kedudukan, dan imej yang berbeza untuk butang anda bergantung pada saiz skrin.

Adakah mungkin untuk menjejaki prestasi butang perkongsian sosial saya? Jejaki prestasi butang perkongsian sosial anda dengan mengintegrasikannya dengan alat analisis seperti Google Analytics. Ini boleh dilakukan dengan menambahkan kod penjejakan ke pautan butang anda. Ini akan membolehkan anda melihat berapa kali setiap butang diklik dan berapa banyak lalu lintas yang mereka memandu ke laman web anda.

Bagaimana saya boleh menambah kiraan saham ke butang perkongsian sosial saya?

Menambah kiraan saham ke butang perkongsian sosial anda boleh dilakukan dengan menggunakan API yang disediakan oleh platform media sosial. API ini membolehkan anda mengambil bilangan kali URL telah dikongsi di platform mereka. Anda kemudian boleh memaparkan nombor ini di sebelah butang perkongsian anda. Perhatikan bahawa tidak semua platform menyediakan ciri ini, dan ada yang memerlukan anda mendaftarkan permohonan untuk menggunakan API mereka. Tambah butang perkongsian sosial ke jenis pos tersuai. Ini boleh dilakukan dengan mengubah suai kod PHP yang menghasilkan butang anda. Anda perlu menambah syarat yang memeriksa jenis pos dan menambah butang dengan sewajarnya. Pastikan untuk menguji perubahan anda untuk memastikan ia berfungsi dengan betul.

Bagaimana saya boleh mengoptimumkan butang perkongsian sosial saya untuk SEO?

Mengoptimumkan butang perkongsian sosial anda untuk SEO melibatkan menambah tag meta yang sesuai ke halaman anda. Tag ini memberikan maklumat mengenai kandungan anda kepada platform media sosial, seperti tajuk, keterangan, dan imej untuk dipaparkan apabila kandungan anda dikongsi. Ini dapat meningkatkan penglihatan dan kadar klik melalui kandungan bersama anda. . Ikon SVG adalah berasaskan vektor, bermakna mereka boleh diperkuat tanpa kehilangan kualiti. Ini menjadikan mereka pilihan yang baik untuk reka bentuk responsif. Anda boleh menggunakan ikon SVG pra-buatan atau membuat sendiri menggunakan perisian reka bentuk grafik.

Bagaimana saya boleh menambah butang perkongsian sosial ke menu WordPress saya? Menu WordPress boleh dilakukan dengan menggunakan editor menu WordPress. Anda boleh menambah pautan tersuai ke menu anda dan menggunakan CSS untuk menggayakannya sebagai butang. Perhatikan bahawa ini akan membuat pautan statik, bukan yang dinamik yang berubah berdasarkan halaman semasa. Lebih cepat dapat dicapai dengan mengoptimumkan kod dan sumber anda. Ini termasuk meminimumkan fail CSS dan JavaScript anda, mengoptimumkan imej anda, dan menggunakan kod yang cekap. Anda juga boleh menggunakan Rangkaian Penyampaian Caching dan Kandungan (CDN) untuk meningkatkan lagi masa pemuatan.

Atas ialah kandungan terperinci Membina plugin perkongsian sosial anda sendiri untuk WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!