Pengenalan kepada Oembed dan WordPress

WordPress kini merupakan salah satu CMS terbesar dan platform blog. Tetapi mengapa begitu? WordPress telah dikritik banyak sejak beberapa tahun kebelakangan ini. Salah satu isu terbesar ialah seni bina tidak begitu moden seperti yang mungkin. Cara platform (atau CMS) ditulis pada tahun 2004 adalah berbeza dari piawaian yang kita lihat hari ini. Walaupun begitu, tidak ada keraguan bahawa ia sangat mudah digunakan untuk pengguna akhir.

pengguna akhir mahu CMS yang mudah untuk menerbitkan kandungan dengan. Saya percaya bahawa kebanyakan pengguna tidak mahu kod keras kandungan mereka. Jika pelanggan bertanya kepada saya: "Saya ingin menambah beberapa kandungan dari SlideShare", fikiran saya pergi untuk berehat API atau sekurang -kurangnya kod benih. Hari ini kita akan melihat ciri WordPress yang mungkin anda gunakan tanpa mengetahui.

Takeaways Key

Oembed adalah protokol yang membolehkan penyebaran kandungan mudah di tapak, berfungsi melalui hubungan pengguna dan penyedia. Ia menentukan empat jenis sumber - foto, video, pautan, dan kaya - semuanya menyediakan URL, lebar, dan ketinggian dalam respons mereka.
WordPress mempunyai sokongan terbina dalam Oembed, dengan senarai penyedia putih. Dengan hanya menampal URL dari pembekal putih ketika membuat jawatan atau halaman, WordPress secara automatik mengambil HTML yang ditanam dan memaparkannya di dalam jawatan. Pengguna juga boleh menambah pembekal tambahan secara manual.
Di luar kesederhanaannya untuk pengguna akhir, Oembed adalah alat yang fleksibel dalam WordPress. Pengguna boleh bereksperimen dengan ahli putih, memanjangkannya dengan penyedia mereka sendiri, dan juga menyesuaikan penampilan oembeds mereka. WordPress juga menyediakan fungsi untuk mendaftarkan tapak yang menyokong Oembed dan untuk menambah sokongan Oembed ke tapak.

Pengenalan ke Oembed

Oembed adalah cara yang sangat mudah untuk membenamkan kandungan di laman web anda. Oembed terdiri daripada pengguna dan pembekal. Pembekal menyediakan sumber yang boleh tertanam pada pengguna dan pengguna meminta sumber -sumber tersebut melalui titik akhir oembed.

Pelaksanaan Oembed menentukan 4 jenis sumber:

foto
video
Pautan
Rich

Foto, video dan jenis yang kaya harus menyediakan URL, lebar dan ketinggian dalam respons mereka. Penyedia boleh memasukkan juga data lain, tetapi ini adalah semua yang diperlukan apabila berurusan dengan jenis kandungan ini. Spesifikasi Oembed adalah garis panduan, pembekal boleh melakukan pelaksanaan Oembed mereka sendiri. Penyedia harus mempunyai sekurang -kurangnya satu titik akhir oembed dan url sumber.

mari kita lihat SlideShare dan lihat bagaimana mereka telah melaksanakan Oembed.

Dalam dokumentasi mereka, mereka menentukan titik akhir Oembed dan titik akhir sumber. Titik akhir oembed adalah: http://www.slideshare.net/api/oembed/2. Titik akhir sumber kelihatan seperti ini: http://www.slideshare.net/user-slug/slidename-slug. Untuk mendapatkan maklumat dari pembekal, kita harus menggunakan titik akhir Oembed dan lulus parameter URL sumber. Parameter harus dikodkan URL. Keperluan minimum adalah parameter URL, tetapi anda juga boleh lulus MaxWidth , MaxHeight dan format . Ia benar -benar bergantung pada format kandungan, tetapi untuk video, foto dan format yang kaya, anda mempunyai pilihan untuk lulus hujah -hujah ini. Juga, Oembed hanya menentukan kaedah GET, jadi anda tidak boleh menggunakan kaedah lain.

mari kita buat permintaan ke titik akhir ini menggunakan parameter URL.

Buat permintaan untuk: http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014 dan anda akan mendapat sambutan berikut:

<span><span><span><oembed>></oembed></span>
</span>  <span><span><span><total-slides> type<span>="integer"</span>></total-slides></span>50<span><span></span>></span>  
</span>  <span><span><span><thumbnail-width> type<span>="integer"</span>></thumbnail-width></span>170<span><span></span>></span>
</span>  <span><span><span><width> type<span>="integer"</span>></width></span>425<span><span></span>></span>
</span>  <span><span><span><type>></type></span>rich<span><span></span>></span>
</span>  <span><span><span><provider-name>></provider-name></span>SlideShare<span><span></span>></span>
</span>  <span><span><span><slideshow-id> type<span>="integer"</span>></slideshow-id></span>41489102<span><span></span>></span>
</span>  <span><span><span><provider-url>></provider-url></span>http://www.slideshare.net<span><span></span>></span>
</span>  <span><span><span><slide-image-baseurl>></slide-image-baseurl></span>//image.slidesharecdn.com/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02/95/slide-<span><span></span>></span>
</span>  <span><span><span><version>></version></span>1.0<span><span></span>></span>
</span>  <span><span><span><conversion-version> type<span>="integer"</span>></conversion-version></span>2<span><span></span>></span>
</span>  <span><span><span>></span><span><span><iframe> src<span>="http://www.slideshare.net/slideshow/embed_code/41489102"</span> width<span>="427"</span> height<span>="356"</span> frameborder<span>="0"</span> marginwidth<span>="0"</span> marginheight<span>="0"</span> scrolling<span>="no"</span> <span>style<span>="<span>border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;</span>"</span></span> allowfullscreen></iframe></span> <span><span></span>></span> <span><span><div> <span>style<span>="<span>margin-bottom:5px</span>"</span></span>> <span><span><strong>></strong></span> <span><span><a> href<span>="https://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014"</span> title<span>="WordPress Themes Demystified"</span> target<span>="_blank"</span>></a></span>WordPress Themes Demystified<span><span></span>></span> <span><span></span>></span> from <span><span><strong>></strong></span><span><span><a> href<span>="http://www.slideshare.net/chris-burgess"</span> target<span>="_blank"</span>></a></span>Chris Burgess<span><span></span>></span><span><span></span>></span> <span><span></span></span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span><author-name>></author-name></span>Chris Burgess<span><span></span>></span>
</span>  <span><span><span><title>></title></span>WordPress Themes Demystified<span><span></span>></span>
</span>  <span><span><span><height> type<span>="integer"</span>></height></span>355<span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Jika anda hanya meminta nilai URL dalam penyemak imbas, anda hanya akan mendapat halaman HTML biasa. Sesuatu yang anda lihat setiap hari. Slideshare Default ke format XML jika tiada format lain diminta. Mari kita ubah permintaan sedikit. Kali ini kami akan menambah parameter lain dan mendapatkan respons JSON.

<span>{
</span>
    <span>"author_url": "http://www.slideshare.net/chris-burgess",
</span>    <span>"total_slides": 50,
</span>    <span>"provider_name": "SlideShare",
</span>    <span>"version_no": "1415853027",
</span>    <span>"html": "<iframe src="%5C%22http://www.slideshare.net/slideshow/embed_code/41489102%5C%22" width='\"427\"' height='\"356\"' frameborder='\"0\"' marginwidth='\"0\"' marginheight='\"0\"' scrolling='\"no\"' style='\"border:1px' solid border-width:1px margin-bottom:5px max-width: allowfullscreen> </iframe> <div style='\"margin-bottom:5px\"'> <strong> <a href="%5C%22https://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014%5C%22" title='\"WordPress' themes demystified target='\"_blank\"'>WordPress Themes Demystified</a> </strong> from <strong><a href="%5C%22http://www.slideshare.net/chris-burgess%5C%22" target='\"_blank\"'>Chris Burgess</a></strong> </div>\n\n",
</span>    <span>"thumbnail_height": 128,
</span>    <span>"type": "rich",
</span>    <span>"slide_image_baseurl": "//image.slidesharecdn.com/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02/95/slide-",
</span>    <span>"slide_image_baseurl_suffix": "-1024.jpg",
</span>    <span>"slideshow_id": 41489102,
</span>    <span>"title": "WordPress Themes Demystified",
</span>    <span>"version": "1.0",
</span>    <span>"height": 355,
</span>    <span>"provider_url": "http://www.slideshare.net",
</span>    <span>"thumbnail": "//cdn.slidesharecdn.com/ss_thumbnails/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02-thumbnail.jpg?cb=1415853027",
</span>    <span>"conversion_version": 2,
</span>    <span>"author_name": "Chris Burgess",
</span>    <span>"thumbnail_width": 170,
</span>    <span>"width": 425
</span>
<span>}</span>

Cuba lagi untuk meminta sumber itu, tetapi kali ini tentukan parameter tambahan. Mari letakkan parameter maxwidth kepada 200 dan minta url ini: http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014 200, anda harus mendapatkan hasil ini:

<span>{
</span>
    <span>"conversion_version": 2,
</span>    <span>"version_no": "1415853027",
</span>    <span>"slide_image_baseurl_suffix": "-320.jpg",
</span>    <span>"html": "<iframe src="%5C%22http://www.slideshare.net/slideshow/embed_code/41489102%5C%22" width='\"202\"' height='\"168\"' frameborder='\"0\"' marginwidth='\"0\"' marginheight='\"0\"' scrolling='\"no\"' style='\"border:1px' solid border-width:1px margin-bottom:5px max-width: allowfullscreen> </iframe> <div style='\"margin-bottom:5px\"'> <strong> <a href="%5C%22https://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014%5C%22" title='\"WordPress' themes demystified target='\"_blank\"'>WordPress Themes Demystified</a> </strong> from <strong><a href="%5C%22http://www.slideshare.net/chris-burgess%5C%22" target='\"_blank\"'>Chris Burgess</a></strong> </div>\n\n",
</span>    <span>"total_slides": 50,
</span>    <span>"width": 200,
</span>    <span>"slide_image_baseurl": "//image.slidesharecdn.com/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02/85/slide-",
</span>    <span>"thumbnail_height": 128,
</span>    <span>"thumbnail_width": 170,
</span>    <span>"thumbnail": "//cdn.slidesharecdn.com/ss_thumbnails/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02-thumbnail.jpg?cb=1415853027",
</span>    <span>"provider_name": "SlideShare",
</span>    <span>"author_url": "http://www.slideshare.net/chris-burgess",
</span>    <span>"author_name": "Chris Burgess",
</span>    <span>"version": "1.0",
</span>    <span>"slideshow_id": 41489102,
</span>    <span>"type": "rich",
</span>    <span>"height": 167,
</span>    <span>"title": "WordPress Themes Demystified",
</span>    <span>"provider_url": "http://www.slideshare.net"
</span>
<span>}</span>

Jika anda membandingkan lebar iframe pada kunci HTML permintaan ini dengan permintaan sebelumnya, anda harus melihat perbezaan. Yang pertama mempunyai lebar 427 dan yang terakhir mempunyai lebar 202.

Jika anda ingin mengetahui lebih lanjut mengenai spesifikasi Oembed, lihatlah dokumen Oembed rasmi. Juga perhatikan dokumentasi Oembed SlideShare dan bermain dengannya sedikit untuk lebih memahami bagaimana ia berfungsi.

mengapa ini berguna

Buat seketika, mari kita lupakan pelaksanaan teknikal. WordPress lebih banyak mengenai pengguna akhir. Semua pelaksanaan spesifikasi Oembed adalah di dalam asas WordPress. WordPress mempunyai senarai putih semua penyedia oembed yang disokong. Ini hanya sebahagian daripada mereka dari Whitelist mereka.

WordPress memudahkan untuk membenamkan kandungan dari senarai putih ini. Cukup tampal URL satu sumber semasa membuat siaran atau halaman.

Anda kemudian akan melihatnya dengan serta -merta menjadikan kandungannya:

URL hanya harus menjadi satu baris di atasnya sendiri. WordPress mencari pautan itu dan kemudian mencari untuk melihat sama ada pautan ini adalah sumber untuk salah satu URL Whitelisted. Sekiranya ia, maka ia membuat permintaan ke titik akhir Oembed. Dalam contoh ini, saya menyalin URL Status Twitter dan WordPress yang tertanam status untuk saya, di dalam jawatan. Tetapi ini tidak terhad hanya untuk Twitter, cari laman web lain di Whitelist dan bereksperimen dengan mereka.

Di luar senarai putih, setiap tapak Oembed disokong oleh WordPress. Anda boleh menambah pembekal tambahan secara manual. WordPress menyediakan dua fungsi, satu untuk mendaftarkan laman web yang menyokong Oembed dan satu yang kami boleh hardcode untuk menambah sokongan Oembed ke laman web kami. Gunakan wp_oembed_add_provider () untuk menambah tapak oembed sedia ada ke WordPress. Anda juga boleh menggunakan WP_EMBED_REGISTER_HANDLER () untuk menambah tapak yang tidak bertauliah. Atau, jika anda seperti saya yang membenci untuk mencipta semula roda, anda juga boleh menyemak sama ada plugin wujud terlebih dahulu.

Kesimpulan

Oembed adalah salah satu ciri WordPress yang berguna yang menjadikan hidup anda lebih mudah. Dalam artikel ini kita meliputi apa yang Oembed, kita melihat spesifikasi Oembed dan bagaimana Oembed dan WordPress bekerja bersama -sama. Tetapi jangan berhenti di sana. Eksperimen dengan Whitelist dan melanjutkannya dengan penyedia anda sendiri.

soalan yang sering ditanya mengenai Oembed dan WordPress

Apa yang dimaksudkan dan bagaimana ia berfungsi dengan WordPress? kandungan. WordPress mempunyai sokongan terbina dalam Oembed. Apabila anda menyisipkan URL dari tapak yang menyokong Oembed, WordPress secara automatik menggunakan API untuk mengambil HTML yang dibenamkan dan memaparkannya dalam siaran anda. Ini menghapuskan keperluan untuk menyalin dan menampal HTML dari laman web yang menganjurkan media yang anda ingin enembed. Boleh melakukannya dengan menggunakan plugin seperti disable embeds atau pengurus oembed. Sebagai alternatif, anda boleh menambah beberapa baris kod ke fail fungsi.php tema anda untuk melumpuhkan Oembed. Walau bagaimanapun, sedar bahawa ini akan melumpuhkan semua jenis embed. Ini boleh dilakukan dengan menambahkan CSS tersuai ke tema anda. CSS yang tepat yang anda perlukan bergantung kepada jenis embed dan reka bentuk tema anda. Adalah penting untuk hanya membenamkan kandungan dari sumber yang dipercayai. Sesetengah laman web mungkin tidak membersihkan kod oembed mereka dengan betul, yang berpotensi membawa kepada kelemahan keselamatan.

Kenapa saya tidak bekerja di WordPress?

Mungkin ada beberapa sebab mengapa oembed anda tidak berfungsi. URL yang anda cuba embed mungkin tidak dari tapak yang menyokong Oembed, atau mungkin terdapat konflik dengan plugin atau tema. Sekiranya anda menghadapi masalah, cubalah melumpuhkan semua plugin dan beralih ke tema lalai untuk melihat apakah itu menyelesaikan masalah itu. Anda boleh menggunakan Oembed dengan jenis pos tersuai di WordPress. Anda hanya perlu memastikan bahawa jenis post tersuai menyokong ciri 'editor'.

Bagaimana saya boleh menambah sokongan untuk penyedia oembed baru di WordPress? pembekal oembed dengan menggunakan fungsi wp_oembed_add_provider (). Fungsi ini membolehkan anda menentukan skema URL untuk pembekal dan titik akhir yang harus digunakan oleh WordPress untuk mengambil html. , Anda boleh mengehadkan lebar dan ketinggian oembeds di WordPress. Ini boleh dilakukan dengan menggunakan penapis embed_defaults, yang membolehkan anda menentukan lebar dan ketinggian maksimum untuk semua oembeds. selama 24 jam untuk meningkatkan prestasi. Walau bagaimanapun, anda boleh menukar tempoh ini dengan menggunakan penapis Oembed_ttl. fungsi wp_oembed_get (). Fungsi ini membolehkan anda mengambil HTML yang ditanam untuk URL dan memaparkannya di mana sahaja di laman web anda.

Atas ialah kandungan terperinci Pengenalan kepada Oembed dan WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!