Pamerkan kalendar acara anda dengan pemalam kalendar WordPress percuma

Banyak perniagaan perlu berkongsi kalendar acara dengan pelanggan. Contohnya, restoran boleh menggunakan kalendar acara untuk mempromosikan acara muzik khas atau menu percutian. Begitu juga, sekolah boleh menggunakan kalendar acara di tapak web mereka untuk memastikan pelajar dan guru dimaklumkan tentang sebarang acara akan datang di sekolah yang berkaitan dengan sukan, peperiksaan atau aktiviti lain.

Pemalam kalendar acara juga berguna jika individu ingin menjejaki perkara berbeza yang sepatutnya mereka lakukan. Contohnya, anda boleh menggunakan pemalam kalendar acara untuk menandakan mesyuarat dan acara penting, seperti hari lahir rakan dan keluarga.

Dalam tutorial ini, anda akan belajar cara membuat acara menggunakan pemalam pengurusan acara My Calendar WordPress percuma. Plugin ini mempunyai banyak ciri yang menakjubkan dan kami akan menggunakannya dalam tutorial ini.

Apa yang akan kita bina

Tumpuan tutorial ini adalah untuk mencipta kalendar yang membolehkan syarikat menandakan semua acara yang mereka uruskan, seperti parti, perkahwinan, pameran seni, dsb. Mereka akan dapat melihat semua aktiviti masa depan dan masa lalu.

Kami akan mewarna acara kod untuk pengenalan mudah. Pengguna akan dapat mengklik mana-mana kategori acara tertentu dan hanya melihat acara yang sepadan dalam kalendar. Mengklik pada mana-mana acara akan memaparkan pop timbul dengan semua maklumat asas tentang acara, seperti masa dan lokasi acara.

Kami akan mulakan dengan memasang pemalam. Kami kemudian akan menukar beberapa tetapan untuk mengubah suai input dan output. Selepas itu, kami akan membuat beberapa kategori acara, menambah beberapa lokasi acara dan akhirnya menambah acara pada kalendar kami.

Selain itu, terdapat kemungkinan besar anda ingin membuat beberapa perubahan pada penampilan kalendar acara anda supaya ia sebati dengan seluruh tapak web anda. Jadi pada langkah terakhir kami akan menambah beberapa peraturan CSS kami sendiri untuk membuat beberapa perubahan kosmetik pada kalendar.

Buat kalendar acara

Tetapan

Langkah pertama dalam mencipta kalendar acara ialah memasang pemalam Kalendar Saya. Setelah anda memasang dan mengaktifkan pemalam, pergi ke Kalendar Saya > Tetapan dalam papan pemuka pentadbir anda. Anda akan melihat sekumpulan tab di sana.

Klik Umum dan nyatakan ID halaman yang anda mahu kalendar acara dipaparkan. Dalam kes kami, ia adalah 118. Langkah ini adalah pilihan, pemalam akan membuat halaman kalendar acara secara automatik untuk anda apabila anda menerbitkan acara pertama anda. Walau bagaimanapun, adalah baik untuk mengetahui cara memaparkan kalendar acara pada halaman tertentu.

Setiap kali anda mencipta acara baharu menggunakan pemalam ini, anda perlu mengisi beberapa butiran mengenainya. Ini boleh merangkumi banyak perkara seperti lokasi acara, penerangan ringkas, dsb. Tidak semua medan input ini aktif secara lalai. Jadi, anda kini perlu pergi ke tab Input dan semak medan yang ingin anda paparkan seperti yang ditunjukkan dalam imej di bawah.

Anda mungkin perasan bahawa selain daripada kalendar itu sendiri, terdapat banyak butang dan menu lungsur pada halaman kalendar acara. Susunan butang ini muncul dikawal oleh tetapan dalam teg Output. Anda boleh menyeret elemen ke atas dan ke bawah untuk memaparkannya dalam susunan tertentu. Hanya seret elemen di bawah baris Sembunyikan untuk mengelakkannya daripada ditunjukkan.

Anda boleh mengawal maklumat yang dipaparkan kepada pengguna dalam pop timbul selepas mengklik pada acara dengan menogol kotak pilihan di bawah Butiran Acara Individu.

Buat kategori acara

Sekarang kami telah menyediakan segala-galanya, tiba masanya untuk mencipta kandungan sebenar untuk kalendar acara kami.

Kami akan mulakan dengan menambah beberapa kategori untuk melabelkan acara yang berbeza. Pemalam ini memberi pengguna pilihan untuk melihat kategori acara tertentu sahaja. Setelah acara diperuntukkan kepada kategori yang berbeza, ia boleh ditapis dengan cara ini.

Untuk menambah kategori baharu pada kalendar anda, hanya pergi ke Kalendar Saya > Uruskan Kategori dan nyatakan nama kategori dan warna label. Anda juga boleh memilih untuk memaparkan ikon sebelum kategori dengan memilih ikon daripada senarai lungsur Ikon Kategori.

Selepas menambah semua butiran kategori, klik pada butang Tambah Kategori untuk menambah kategori pada kalendar acara.

Tambah lokasi acara

Sebarang acara yang anda anjurkan akan diadakan di suatu tempat. Pemalam melakukan kerja yang hebat untuk menentukan lokasi acara yang berbeza.

Anda boleh menambah lokasi baharu pada widget kalendar dengan pergi ke Kalendar Saya > Tambah Lokasi Baharu. Halaman seterusnya akan mengandungi beberapa medan input yang meminta butiran lokasi yang berbeza. Ini termasuk maklumat biasa seperti alamat jalan, bandar, poskod, negara, dsb. Anda tidak perlu mengisi semua nilai ini. Beberapa butiran ini boleh dilangkau.

Pastikan anda telah memasukkan nama lokasi di bahagian atas. Ini akan membantu anda mengenal pasti lokasi ini dengan mudah dalam menu lungsur semasa membuat acara.

Dalam contoh ini, kami akan menambah lokasi untuk pameran seni di Kentucky, Amerika Syarikat. Alamatnya adalah rekaan, tetapi ia akan memberi anda idea tentang cara mengisi butiran anda.

Pemalam akan memberikan pengguna pautan ke Peta Google dengan alamat yang anda tentukan. Ini memudahkan untuk mengetahui dengan tepat di mana kejadian itu berlaku. Mana-mana lokasi yang anda tambahkan pada pemalam boleh diedit dengan mengklik Kalendar Saya > Urus Lokasi.

Tambah acara

Kami kini boleh mula menambahkan acara pada kalendar acara kami. Untuk menambah acara, hanya pergi ke Kalendar Saya > Tambah Acara Baharu.

Sekarang, isikan tajuk dan penerangan acara tersebut. Tajuk muncul dalam tarikh kalendar acara. Apabila pengguna mengklik pada pautan Baca Lagi dalam pop timbul, penerangan akan muncul pada halaman penerangan kempen. Tetapkan kategori acara kepada Pameran daripada menu lungsur.

Anda kini boleh menentukan tarikh dan masa acara anda. Kemungkinan sekurang-kurangnya beberapa acara yang anda tambahkan pada kalendar anda ialah acara berulang. Dalam kes ini, menambah semua acara berulang pada kalendar satu demi satu akan memakan masa yang lama.

Untuk memudahkan anda, pemalam Kalendar Saya memberi anda pilihan untuk menentukan corak peristiwa berulang. Ini bermakna anda boleh menentukan berapa kali acara berulang dan kekerapan acara itu berulang.

Pada permulaan tutorial kami menandai kotak untuk membolehkan penerangan ringkas medan input acara. Ini membolehkan kami menyediakan ringkasan ringkas acara, yang dipaparkan dalam tetingkap pop timbul apabila pengguna mengklik pada acara dalam kalendar.

Anda boleh menentukan lokasi acara di bahagian bawah halaman Tambah Acara Baharu. Dalam contoh ini, pilih sahaja Pameran Seni (Kentucky). Selepas itu, klik pada butang Terbitkan di bahagian atas atau bawah halaman.

Tukar gaya kalendar acara anda

Selepas melengkapkan semua langkah dalam tutorial ini, kalendar acara anda akan kelihatan seperti imej di bawah. Jika ia digayakan secara berbeza daripada imej di bawah, cuma pergi ke Kalendar Saya > Editor Gaya dan pilih fail twentyeighteen.css daripada menu lungsur dalam bar sisi sebagai helaian gaya utama untuk kalendar.

Terdapat banyak tema lain yang boleh digunakan pada kalendar. Pilih sahaja yang paling anda suka. Sesetengah daripada mereka (seperti inherit.css) direka untuk menyediakan sesedikit gaya yang mungkin supaya kebanyakan peraturan penggayaan dalam tema digunakan secara automatik pada kalendar.

p>

Halaman editor gaya memaparkan semua peraturan CSS yang digunakan pada kalendar dalam fail yang dipilih. Anda boleh membuat pelbagai perubahan di sini dan ia akan ditunjukkan pada halaman kalendar acara.

Kini kami hanya akan melaraskan jarak dan fon yang digunakan pada elemen yang berbeza, seperti tajuk jadual, tajuk dan legenda kategori di bahagian bawah. Kami juga akan menambah beberapa peraturan gaya kami sendiri untuk melaraskan penampilan kalendar mengikut keinginan kami.

Berikut ialah semua peraturan yang telah kami tambahkan pada kalendar acara kami. Hanya letakkannya di bahagian bawah editor gaya dan perubahan akan ditunjukkan pada halaman kalendar acara selepas mengklik butang Simpan Perubahan di bahagian bawah.

.mc-main .my-calendar-header .no-icon,
.mc-main .mc_bottomnav .no-icon {
    display: inline-block;
	/* width: 12px; */
	width: 15px;
	height: 15px;
	vertical-align: middle;
	margin-right: .25em;
	border-radius: 12px;
	position: relative;
	top: -2px;
	border: 1px solid #fff;
}

.mc-main .my-calendar-header span, .mc-main .my-calendar-header a,
.mc-main .mc_bottomnav span, .mc-main .mc_bottomnav a,
.mc-main .my-calendar-header select, .mc-main .my-calendar-header input {
	color: #313233;
	color: var(--primary-dark);
	/* border: 1px solid #efefef;
	border: 1px solid var(--highlight-light); */
	border-radius: 5px;
	padding: 4px 6px;
	font-size: 14px;
	/* font-family: Arial; */
	background: #fff;
	background: var(--secondary-light);
}

.mc-main .my-calendar-header input:hover, .mc-main .my-calendar-header input:focus,
.mc-main .my-calendar-header a:hover, .mc-main .mc_bottomnav a:hover,
.mc-main .my-calendar-header a:focus, .mc-main .mc_bottomnav a:focus {
	background: black;
}

div.mc-print {
    margin-top: 2rem;
}

.mc_bottomnav.my-calendar-footer {
    margin-top: 5rem;
}

.mc-main button.close {
	top: 5px;
	left: 5px;
}

.mc-main .calendar-event .details, .mc-main .calendar-events {
	border: 5px solid #ececec;
	box-shadow: 0 0 20px #999;
}


.mc-main .mc-time .day {
	border-radius: 0;
}

.mc-main .mc-time .month {
	border-radius: 0;
	border-right: 1px solid #bbb;
}

.mc-main .my-calendar-header span, .mc-main .my-calendar-header a,
.mc-main .mc_bottomnav span, .mc-main .mc_bottomnav a,
.mc-main .my-calendar-header select, .mc-main .my-calendar-header input {
	color: #313233;
	color: var(--primary-dark);
	border-radius: 0px;
	padding: 4px 10px;
	font-size: 14px;
	background: #fff;
	background: var(--secondary-light);
	border-bottom: 1px solid black;
}

.mc-main th abbr, .mc-main .event-time abbr {
    border-bottom: none;
    text-decoration: none;
    font-family: 'Passion One';
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1;
}

.mc-main caption, .mc-main.list .my-calendar-month, .mc-main .heading {
    font-size: 2.5rem;
    color: #666;
    color: var(--highlight-dark);
    text-align: right;
    margin: 0;
    font-family: 'Passion One';
    text-transform: uppercase;
}

.mc-main .category-key li.current a {
    border: 1px solid #969696;
    background: #dadada;
}

Sekarang, pergi ke halaman kalendar acara dan klik pada salah satu acara yang anda tambahkan. Ini sepatutnya membuka tetingkap pop timbul yang menunjukkan semua butiran asas acara, seperti masa, lokasi dan penerangan ringkas acara tersebut.

Fikiran Akhir

Dalam tutorial ini, kami mempelajari cara menggunakan pemalam Kalendar Saya untuk mencipta kalendar acara asas untuk tapak web kami. Pemalam menjadikannya sangat mudah untuk mencipta dan menambah acara dan penerangan ringkas.

Walau bagaimanapun, pemalam masih kehilangan beberapa ciri, seperti widget dan halaman penerangan yang lebih maju yang menawarkan ciri tambahan seperti pilihan pembayaran dan keupayaan untuk pengguna menambah ulasan tentang acara tersebut. Plugin juga agak sukar untuk digayakan. Jika anda mahukan pemalam kalendar acara yang lebih maju untuk tapak web anda, anda harus menyemak pemalam kalendar acara WordPress di CodeCanyon.

Atas ialah kandungan terperinci Pamerkan kalendar acara anda dengan pemalam kalendar WordPress percuma. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!