許多企業(yè)需要與客戶共享活動日歷。愛掏網(wǎng) - it200.com例如，餐廳可以使用活動日歷來宣傳特殊音樂活動或假日菜單。愛掏網(wǎng) - it200.com同樣，學(xué)?？梢允褂闷渚W(wǎng)站上的活動日歷，讓學(xué)生和教師了解學(xué)校即將舉行的與體育、考試或其他活動相關(guān)的任何活動。愛掏網(wǎng) - it200.com
如果個人想要跟蹤他們應(yīng)該做的不同事情，事件日歷插件也很有幫助。愛掏網(wǎng) - it200.com例如，您可以使用活動日歷插件來標(biāo)記重要的會議和活動，例如朋友和家人的生日。愛掏網(wǎng) - it200.com
在本教程中，您將學(xué)習(xí)如何使用免費的“我的日歷”WordPress 事件管理插件來創(chuàng)建事件。愛掏網(wǎng) - it200.com該插件具有許多令人驚嘆的功能，我們將在本教程中使用它們。愛掏網(wǎng) - it200.com
本教程的重點是創(chuàng)建一個日歷，允許公司標(biāo)記他們管理的所有活動，如聚會、婚禮、藝術(shù)展覽等。愛掏網(wǎng) - it200.com他們將能夠看到所有未來和過去的活動。愛掏網(wǎng) - it200.com
我們將對事件進(jìn)行顏色編碼，以便于識別。愛掏網(wǎng) - it200.com用戶將能夠單擊任何特定的事件類別，并且只能在日歷中看到匹配的事件。愛掏網(wǎng) - it200.com單擊任何事件都會顯示一個彈出窗口，其中包含有關(guān)該事件的所有基本信息，例如事件的時間和地點。愛掏網(wǎng) - it200.com
我們將從安裝插件開始。愛掏網(wǎng) - it200.com然后，我們將更改一些設(shè)置來修改輸入和輸出。愛掏網(wǎng) - it200.com之后，我們將創(chuàng)建一些事件類別，添加一些事件位置，最后將事件添加到我們的日歷中。愛掏網(wǎng) - it200.com
此外，您很有可能希望對活動日歷的外觀進(jìn)行一些更改，以便它與網(wǎng)站的其他部分融為一體。愛掏網(wǎng) - it200.com因此，我們將在最后一步中添加一些我們自己的 CSS 規(guī)則，對日歷進(jìn)行一些修飾性更改。愛掏網(wǎng) - it200.com
設(shè)置
創(chuàng)建活動日歷的第一步是安裝“我的日歷”插件。愛掏網(wǎng) - it200.com安裝并激活該插件后，請轉(zhuǎn)到管理儀表板中的我的日歷 > 設(shè)置。愛掏網(wǎng) - it200.com您會在那里看到一堆選項卡。愛掏網(wǎng) - it200.com
點擊常規(guī)，然后指定您希望顯示活動日歷的頁面的 ID。愛掏網(wǎng) - it200.com在我們的例子中，它是 118。愛掏網(wǎng) - it200.com此步驟是可選的，當(dāng)您發(fā)布第一個活動時，插件會自動為您創(chuàng)建一個活動日歷頁面。愛掏網(wǎng) - it200.com不過，了解如何在特定頁面上顯示活動日歷是很有好處的。愛掏網(wǎng) - it200.com
每當(dāng)您使用此插件創(chuàng)建新活動時，您都必須填寫一些有關(guān)它的詳細(xì)信息。愛掏網(wǎng) - it200.com這可能包括許多內(nèi)容，例如事件位置、簡短描述等。愛掏網(wǎng) - it200.com默認(rèn)情況下，并非所有這些輸入字段都是激活的。愛掏網(wǎng) - it200.com因此，您現(xiàn)在應(yīng)該轉(zhuǎn)到輸入選項卡并檢查要顯示的字段，如下圖所示。愛掏網(wǎng) - it200.com
您可能已經(jīng)注意到，除了日歷本身之外，活動日歷頁面上還有很多按鈕和下拉菜單。愛掏網(wǎng) - it200.com這些按鈕的顯示順序由輸出標(biāo)簽中的設(shè)置控制。愛掏網(wǎng) - it200.com您可以上下拖動元素以按特定順序顯示它們。愛掏網(wǎng) - it200.com只需將一個元素拖動到隱藏行下方即可防止其顯示。愛掏網(wǎng) - it200.com
可以通過切換某些事件來控制用戶點擊事件后在彈出窗口中向用戶顯示哪些信息單個事件詳細(xì)信息下的復(fù)選框。愛掏網(wǎng) - it200.com
創(chuàng)建事件類別
現(xiàn)在我們已經(jīng)完成了所有設(shè)置，是時候為我們的活動日歷創(chuàng)建實際內(nèi)容了。愛掏網(wǎng) - it200.com
我們將首先添加一些用于標(biāo)記不同事件的類別。愛掏網(wǎng) - it200.com該插件使用戶可以選擇僅查看特定類別的事件。愛掏網(wǎng) - it200.com一旦事件被分配到不同的類別，就可以通過這種方式進(jìn)行過濾。愛掏網(wǎng) - it200.com
要向日歷添加新類別，只需轉(zhuǎn)到我的日歷 > 管理類別，然后指定該類別的名稱和標(biāo)簽顏色。愛掏網(wǎng) - it200.com您還可以通過從類別圖標(biāo)下拉列表中選擇一個圖標(biāo)來選擇在類別之前顯示圖標(biāo)。愛掏網(wǎng) - it200.com
添加類別的所有詳細(xì)信息后，點擊添加類別按鈕將類別添加到活動日歷。愛掏網(wǎng) - it200.com
添加活動地點
您組織的任何活動都會在某個地方舉行。愛掏網(wǎng) - it200.com該插件在指定不同事件的位置方面做得很好。愛掏網(wǎng) - it200.com
您可以通過轉(zhuǎn)至我的日歷 > 添加新位置向日歷插件添加新位置。愛掏網(wǎng) - it200.com下一頁將包含許多輸入字段，要求提供位置的不同詳細(xì)信息。愛掏網(wǎng) - it200.com這包括街道地址、城市、郵政編碼、國家/地區(qū)等常見信息。愛掏網(wǎng) - it200.com您不必填寫所有這些值。愛掏網(wǎng) - it200.com其中一些細(xì)節(jié)可以跳過。愛掏網(wǎng) - it200.com
確保您已在頂部輸入位置的名稱。愛掏網(wǎng) - it200.com這將幫助您在創(chuàng)建事件時輕松地在下拉菜單中識別這些位置。愛掏網(wǎng) - it200.com
在此示例中，我們將為在美國肯塔基州舉辦的藝術(shù)展覽添加一個地點。愛掏網(wǎng) - it200.com該地址是虛構(gòu)的，但它會讓您了解如何填寫自己的詳細(xì)信息。愛掏網(wǎng) - it200.com
該插件將為用戶提供指向 Google 地圖的鏈接，其中包含您指定的地址。愛掏網(wǎng) - it200.com這使得人們更容易弄清楚事件發(fā)生的確切位置。愛掏網(wǎng) - it200.com您添加到插件的任何位置都可以通過單擊我的日歷 > 管理位置進(jìn)行編輯。愛掏網(wǎng) - it200.com
添加事件
我們現(xiàn)在可以開始將活動添加到我們的活動日歷中。愛掏網(wǎng) - it200.com要添加活動，只需轉(zhuǎn)到我的日歷> 添加新活動即可。愛掏網(wǎng) - it200.com
現(xiàn)在，填寫活動的標(biāo)題和描述。愛掏網(wǎng) - it200.com標(biāo)題顯示在活動日歷的日期內(nèi)。愛掏網(wǎng) - it200.com當(dāng)用戶點擊彈出窗口中的閱讀更多鏈接時，描述將顯示在活動描述頁面上。愛掏網(wǎng) - it200.com從下拉菜單中將事件類別設(shè)置為展覽。愛掏網(wǎng) - it200.com
您現(xiàn)在可以指定活動的日期和時間。愛掏網(wǎng) - it200.com您添加到日歷中的至少一些事件很可能是重復(fù)事件。愛掏網(wǎng) - it200.com在這種情況下，將所有重復(fù)的事件一一添加到日歷中將非常耗時。愛掏網(wǎng) - it200.com
為了讓您的事情變得更輕松，“我的日歷”插件為您提供了指定事件重復(fù)模式的選項。愛掏網(wǎng) - it200.com這意味著您可以指定事件重復(fù)的次數(shù)以及重復(fù)的頻率。愛掏網(wǎng) - it200.com
在教程開始時，我們選中了該框以啟用事件的簡短描述輸入字段。愛掏網(wǎng) - it200.com這使我們能夠提供事件的簡短摘要，每當(dāng)用戶單擊日歷中的事件時，該摘要就會顯示在彈出窗口中。愛掏網(wǎng) - it200.com
您可以在添加新活動頁面底部指定活動的位置。愛掏網(wǎng) - it200.com在此示例中，只需選擇藝術(shù)展覽（肯塔基州）。愛掏網(wǎng) - it200.com之后，點擊頁面頂部或底部的發(fā)布按鈕。愛掏網(wǎng) - it200.com
更改事件日歷的樣式
完成本教程中的所有步驟后，您的活動日歷將如下圖所示。愛掏網(wǎng) - it200.com如果其樣式與下圖不同，只需轉(zhuǎn)到我的日歷>樣式編輯器，然后從側(cè)邊欄的下拉列表中選擇twentyeighteen.css文件作為主要樣式表對于日歷。愛掏網(wǎng) - it200.com
還有許多其他主題可以應(yīng)用于日歷。愛掏網(wǎng) - it200.com只需選擇您最喜歡的一個即可。愛掏網(wǎng) - it200.com其中一些（例如inherit.css）旨在提供盡可能少的樣式，以便主題中的大多數(shù)樣式規(guī)則自動應(yīng)用于日歷。愛掏網(wǎng) - it200.com
p>
樣式編輯器頁面顯示所選文件中應(yīng)用于日歷的所有 CSS 規(guī)則。愛掏網(wǎng) - it200.com您可以在此處進(jìn)行各種更改，這些更改將反映在活動日歷頁面上。愛掏網(wǎng) - it200.com
現(xiàn)在，我們將簡單地調(diào)整應(yīng)用于不同元素的間距和字體，例如底部的表格標(biāo)題、標(biāo)題和類別圖例。愛掏網(wǎng) - it200.com我們還將添加一些我們自己的樣式規(guī)則，以根據(jù)我們的喜好調(diào)整日歷的外觀。愛掏網(wǎng) - it200.com
以下是我們添加到活動日歷中的所有規(guī)則。愛掏網(wǎng) - it200.com只需將它們放在樣式編輯器的底部，單擊底部的保存更改按鈕后，更改就會反映在活動日歷頁面上。愛掏網(wǎng) - it200.com
.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;
}
登錄后復(fù)制
現(xiàn)在，轉(zhuǎn)到活動日歷頁面并單擊您添加的活動之一。愛掏網(wǎng) - it200.com這應(yīng)該會打開一個漂亮的彈出窗口，顯示事件的所有基本詳細(xì)信息，例如事件的時間、地點和簡短描述。愛掏網(wǎng) - it200.com
在本教程中，我們學(xué)習(xí)了如何使用“我的日歷”插件為我們的網(wǎng)站創(chuàng)建基本的活動日歷。愛掏網(wǎng) - it200.com該插件使創(chuàng)建和添加事件以及簡單的描述變得非常容易。愛掏網(wǎng) - it200.com
但是，該插件仍然缺少一些功能，例如小部件和更高級的描述頁面，該頁面提供額外的功能，例如付款選項以及用戶添加有關(guān)活動的評論的功能。愛掏網(wǎng) - it200.com該插件的樣式也有點困難。愛掏網(wǎng) - it200.com如果您想在網(wǎng)站上使用更高級的事件日歷插件，您應(yīng)該查看 CodeCanyon 上的 WordPress 事件日歷插件。愛掏網(wǎng) - it200.com
以上就是使用免費的WordPress日歷插件展示活動日歷的詳細(xì)內(nèi)容，更多請關(guān)注愛掏網(wǎng) - it200.com其它相關(guān)文章！